Post
Ask Question

How to Use Canvas in HTML5

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


Similar Articles