HTML5 – Canvas element

<canvas> element :
    • a resolution-dependent bitmap canvas which can be used for rendering graphs, 
      game graphics,or other visual images on the fly.
    • canvas is a rectangle on your page in which you can use JavaScript
       to draw anything you want.
    • A <canvas> element has no content and no border of its own.
How to make canvas :

     <canvas id=”b” width=”300″ height=”225″></canvas>

Drawing using <canvas> :

                   function draw_b() 


                        var b_canvas = document.getElementById(“b”);

                      var b_context = b_canvas.getContext(“2d”);

                     b_context.fillRect(50, 25, 150, 100);


First we find canvas element by using getElementById() method, then we determine context by getContext() and set
 it to 2d, then draw the rectangle.

Drawing methods and properties :
  • The fillStyle property can be a CSS color, a pattern, or a gradient. 
    (More on gradients shortly.) The default fillStyle is solid black, 
    but you can set it to whatever you like. 
    Each drawing context remembers its own properties as long as the page is open, 
    unless you do something to reset it.
  • fillRect(x, y, width, height) draws a rectangle filled with the current fill style.
  • The strokeStyle property is like fillStyle—it can be a CSS color, a pattern, 
    or a gradient.
  • strokeRect(x, y, width, height) draws a rectangle with the current stroke style.
  • strokeRect doesn’t fill in the middle; it just draws the edges.
  • clearRect(x, y, width, height) clears the pixels in the specified rectangle.
canvas coordinates :
The canvas is a two-dimensional grid. 
The coordinate (0, 0) is at the upper-left corner of the canvas.
now we will do the same as the previous picture :
<canvas id="c" width="500" height="375"></canvas>
var c_canvas = document.getElementById("c");
var context = c_canvas.getContext("2d");
now we want to draw lines so we will use :
  • moveTo(x, y) moves the pencil to the specified starting point.
  • lineTo(x, y) draws a line to the specified ending point.

Let’s begin by drawing the off-white grid:

       for (var x = 0.5; x < 500; x += 10)
            context.moveTo(x, 0); 
           context.lineTo(x, 375);
       for (var y = 0.5; y < 375; y += 10) 
          context.moveTo(0, y); 
          context.lineTo(500, y);
Now we need ink method to make aur lines appear: 

 context.strokeStyle = "#eee"; context.stroke();

Now we will draw horizontal arrow, We want to draw the arrow in a different color ink—black 
instead of off-white—so we need to start a new path:  

 context.moveTo(0, 40); 
 context.lineTo(240, 40);
 context.moveTo(260, 40); 
 context.lineTo(500, 40);
 context.moveTo(495, 35); 
 context.lineTo(500, 40); 
 context.lineTo(495, 45);

Now we will draw vertical arrow, Since the vertical arrow is the same color asthe horizontal 
arrow, we do not need to start another new path:   

 context.strokeStyle = "#000"; 

now we do that:
It is time to write text
  • font can be anything you would put in a CSS font rule. 
    That includes font style, font variant, font weight, font size, line height,   
    and font family.
    • textAlign controls text alignment. 

It is similar (but not identical) to a CSS text-align rule. Possible values are start, end, left, right, and center.

  • textBaseline controls where the text is drawn relative to the starting point.  
    Possible values are top, hanging, middle, alphabetic, ideographic, and bottom.
Let’s draw some text:

   context.font = "bold 12px sans-serif"; 
 context.fillText("x", 248, 43); 
 context.fillText("y", 58, 165); 
 context.textBaseline = "top"; 
 context.fillText("( 0 , 0 )", 8, 5);
 context.textAlign = "right";
 context.textBaseline = "bottom"; 
 context.fillText("( 500 , 375 )", 492, 370);
This will be the final result :

Gradient :
The canvas drawing context supports two types of gradients:
  • createLinearGradient(x0, y0, x1, y1) paints along a line from (x0, y0) to (x1, y1).
  • createRadialGradient(x0, y0, r0, x1, y1, r1) paints along a cone between two circles. 
    The first three parameters represent the starting circle, with origin (x0, y0) 
    and radius r0. 
    The last three parameters represent the ending circle, with origin  (x1, y1) 
    and radius r1.
Let’s make a linear gradient:
 Gradients can be any size, but we’ll make this gradient 300 pixels wide, like the canvas: 

 var my_gradient = context.createLinearGradient(0, 0, 300, 0);

 Because the y values (the second and fourth parameters) are both 0, 
 this gradient will shade evenly from left to right.

Let’s define a gradient that shades from black to white: 

 my_gradient.addColorStop(0, "black"); 
 my_gradient.addColorStop(1, "white");

To draw a gradient, you set your fillStyle to the gradient and draw a shape,
 like a rectangle or a line: 

 context.fillStyle = my_gradient; 
 context.fillRect(0, 0, 300, 225);

This will do the following :  
And this will do a gradient from top to bottom : 

 var my_gradient = context.createLinearGradient(0, 0, 0, 225);
 my_gradient.addColorStop(0, "black"); 
 my_gradient.addColorStop(1, "white"); 
 context.fillStyle = my_gradient;
 context.fillRect(0, 0, 300, 225);

Images : 
The canvas drawing context defines several methods for drawing an image on a canvas:
  • drawImage(image, dx, dy) takes an image and draws it on the canvas. 
    The given coordinates (dx, dy) will be the upper-left corner of the image. 
    Coordinates (0,0) would draw the image at the upper-left corner of the canvas.
  • drawImage(image, dx, dy, dw, dh) takes an image, 
    scales it to a width of dw and a height of dh,
     and draws it on the canvas at coordinates (dx, dy).
  • drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) takes an image, 
    clips it to the rectangle (sx, sy, sw, sh), scales it to dimensions (dw, dh), 
    and draws it on the canvas at coordinates (dx, dy).
To put an image inside a canvas :
 <img id="cat" src="images/cat.png" alt="sleeping cat" width="177" height="113">
 <canvas id="e" width="177" height="113"></canvas> 
 <script> window.onload = function() {
 var canvas = document.getElementById("e"); 
 var context = canvas.getContext("2d"); 
 var cat = document.getElementById("cat");
 context.drawImage(cat, 0, 0); }; 

If you’re creating the image object entirely in JavaScript, 
you can safely draw the image on the canvas during the Image.onload event: 

  <canvas id="e" width="177" height="113"></canvas>
 var canvas = document.getElementById("e"); 
 var context = canvas.getContext("2d");
 var cat = new Image(); 
 cat.src = "images/cat.png"; 
 cat.onload = function() { 
 context.drawImage(cat, 0, 0); };

 By: Mai Mohamed


  1. 10 Articles Introduction to HTML5 is Done ! « DevelopersMix's Blog

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: