Introduction

In this article, we will learn about the canvas element in HTML5 by using an example. The <canvas> element is used to draw graphics, on the fly, via a scripting language like JavaScript.

Create a Canvas

A Canvas drawable region is defined in HTML code with height and width attributes by specifying id, width, and height of the <canvas> element.
  1. <canvasid="mygame"width="1500"height="900">
  2. </canvas>

Canvas Drawing

The <canvas> element has no drawing abilities of its own so all drawings must be done inside JavaScript and JavaScript uses the id to find the <canvas> element.
In our example we use two variables, a and b, to define the axis. We create a function Sphere and pass color, radius, da, and db as parameters. These parameters are used to create Spheres of different sizes, colors, and directions.
  1. <scripttype="text/javascript">
  2. var a = 40;
  3. var b = 50;
  4. function Sphere(color, radius, da, db) {
  5. this.canvas = canvas;
  6. this.context = canvas.getContext('2d');
  7. this.radius = radius;
  8. this.a = a;
  9. this.b = b;
  10. this.da = da;
  11. this.db = db;
  12. this.color = color;
  13. }
  14. Sphere.prototype.form = function () {
  15. this.context.beginPath();
  16. this.context.fillStyle =this.color;
  17. this.context.arc(this.a,this.b, this.radius, 0, Math.PI * 2, false);
  18. this.context.fill();
  19. }
  20. Sphere.prototype.Jump = function () {
  21. if (this.a >= (canvas.width - this.radius) ||this.a <= this.radius) this.da *= -1;
  22. if (this.b >= (canvas.height - this.radius) ||this.b <= this.radius) this.db *= -1;
  23. }
  24. function init() {
  25. canvas = document.getElementById("mygame")
  26. context = canvas.getContext('2d');
  27. // form an arry to store the Sphere info
  28. Spheres = [];
  29. Spheres.push(new Sphere('Olive', 40, 1, 3));
  30. Spheres.push(new Sphere('Silver', 40, 2, 3));
  31. Spheres.push(new Sphere('Lime', 40, 3, 4));
  32. Spheres.push(new Sphere('Grey', 40, 4, 1));
  33. Spheres.push(new Sphere('Pink', 40, 2, 4));
  34. Spheres.push(new Sphere('Navy', 50, 3, 3));
  35. Spheres.push(new Sphere('Teal', 40, 3, 5));
  36. Spheres.push(new Sphere('Blue', 30, 4, 3));
  37. Spheres.push(new Sphere('Black', 30, 3, 9));
  38. Spheres.push(new Sphere('Red', 30, 1, 6));
  39. Spheres.push(new Sphere('Blue', 40, 2, 8));
  40. Spheres.push(new Sphere('Green', 40, 3,8));
  41. Spheres.push(new Sphere('Orange', 30, 4, 4));
  42. Spheres.push(new Sphere('Yellow', 40 , 4, 9));
  43. setInterval(form, 20);
  44. }
  45. function form() {
  46. context.clearRect(0, 0, 2000, 1000);
  47. for (iin Spheres) {
  48. Spheres[i].a += Spheres[i].da;
  49. Spheres[i].b += Spheres[i].db;
  50. Spheres[i].Jump();
  51. Spheres[i].form();
  52. }
  53. }
  54. </script>

Canvas 2D API

The canvas element has no drawing abilities of its own and is a rectangular area where you can control every pixel using scripting. We use canvas.getContext('2d') to create a Sphere shape and getContext("2d") object has methods to draw lines, boxes, circles, and more.

setInterval Method

The setInterval method is used to call a function or evaluate an expression at specified intervals (in milliseconds), like this
setInterval(code,millisec,lang)
The Complete code look like this
  1. <!DOCTYPEhtml PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Canvas Game</title>
  5. <script type="text/javascript">
  6. var a = 40;
  7. var b = 50;
  8. function Sphere(color, radius, da, db) {
  9. this.canvas = canvas;
  10. this.context = canvas.getContext('2d');
  11. this.radius = radius;
  12. this.a = a;
  13. this.b = b;
  14. this.da = da;
  15. this.db = db;
  16. this.color = color;
  17. }
  18. Sphere.prototype.form = function () {
  19. this.context.beginPath();
  20. this.context.fillStyle =this.color;
  21. this.context.arc(this.a,this.b, this.radius, 0, Math.PI * 2, false);
  22. this.context.fill();
  23. }
  24. Sphere.prototype.Jump = function () {
  25. if (this.a >= (canvas.width - this.radius) ||this.a <= this.radius)this.da *= -1;
  26. if (this.b >= (canvas.height - this.radius) ||this.b <= this.radius)this.db *= -1;
  27. }
  28. function init() {
  29. canvas = document.getElementById("mygame")
  30. context = canvas.getContext('2d');
  31. // form an arry to store the Sphere info
  32. Spheres = [];
  33. Spheres.push(new Sphere('Olive', 40, 1, 3));
  34. Spheres.push(new Sphere('Silver', 40, 2, 3));
  35. Spheres.push(new Sphere('Lime', 40, 3, 4));
  36. Spheres.push(new Sphere('Grey', 40, 4, 1));
  37. Spheres.push(new Sphere('Pink', 40, 2, 4));
  38. Spheres.push(new Sphere('Navy', 50, 3, 3));
  39. Spheres.push(new Sphere('Teal', 40, 3, 5));
  40. Spheres.push(new Sphere('Blue', 30, 4, 3));
  41. Spheres.push(new Sphere('Black', 30, 3, 9));
  42. Spheres.push(new Sphere('Red', 30, 1, 6));
  43. Spheres.push(new Sphere('Blue', 40, 2, 8));
  44. Spheres.push(new Sphere('Green', 40, 3,8));
  45. Spheres.push(new Sphere('Orange', 30, 4, 4));
  46. Spheres.push(new Sphere('Yellow', 40 , 4, 9));
  47. setInterval(form, 20);
  48. }
  49. function form() {
  50. context.clearRect(0, 0, 2000, 1000);
  51. for (i in Spheres) {
  52. Spheres[i].a += Spheres[i].da;
  53. Spheres[i].b += Spheres[i].db;
  54. Spheres[i].Jump();
  55. Spheres[i].form();
  56. }
  57. }
  58. </script>
  59. </head>
  60. <body onLoad="init();">
  61. <canvas id="mygame" width="1500"height="900"></canvas>
  62. </body>
  63. </html>
Output
adiii.jpg