HTML5 - Canvas

HTML5 comes with several new interesting features and one that we can start having fun with is Canvas.

The Canvas element specifies an area in the page where you can use javascript to draw and render images, which dramatically broadens the capabilities of dynamic pages and allows developers to build anything which previously could only be done with Flash.

The biggest advantage of using Canvas is that the browser does not need any plugin, which will expand the availability of dynamic pages.

Canvas Compatibility

The Canvas element was originally developed by Apple for its Safari browser and then was used and standardized by the WHATWG organization to incorporate into HTML5. Subsequently also been adopted by browsers like Firefox and Opera.

Chrome is a browser that uses the same rendering engine that Safari, so it also supports the Canvas element.

Among the most common browsers only Internet Explorer does not support Canvas. In it’s latest version (IE8) , Canvas is not supported with native functions. There are various projects and plugins that can extend the functionality of the browser to support this element of HTML5.

Canvas’ Potential

Canvas allows you to draw on the page and dynamically update these drawings using scripts. This means developers can build incredible applications. From games,  to dynamic effects on user interfaces, code editors, graphic editors, applications, 3D effects, and more.

Canvas can be used in 2D or 3D mode. In this post we are only go over through 2D Canvas.

2D Coordinate axis of the canvas

To put items in the canvas we have to take into account the axis of coordinates in two dimensions, which begins in the upper left corner of the canvas.

The width and height attributes in the CANVAS tag specify the dimensions of the canvas area. Therefore, the upper left corner is the point (0,0) and the lower right corner point defined by (width-1, height-1),  the peak coordinate marked by its width and height.

We can see the diagram below to get an accurate picture of the dimensions and coordinates in a canvas.

Any point within the canvas are calculated using the coordinate (x, y), where the “x” increases according to the pixel value to right and the “y” to the pixel value to down.

Working with Canvas

The Canvas element has a variety of functions but to begin we will draw a circle using a javascript API functions for drawing in Canvas.

First, we have to place a Canvas element in our page using the HTML tag "CANVAS" and then inside that element we will draw with javascript.

Canvas element

<canvas id="balls" width="760" height="400">
 This text is shown for browsers that doesn't support Canvas
 <br />
 Please upgrade your browser to Firefox, Chrome, Safari or Opera

</canvas>

To specify the characteristics of this canvas we have several attributes:
Id attribute: To assign a unique name and then refer to this canvas from Javascript.
Width and height attributes: To indicate the width and height of the canvas area.

Painting on a canvas using javascript

There are several functions to draw shapes and paths on a canvas. We can combine them to make more complex drawings. But in this case we will start drawing a few simple forms. However, we must do before some checks to see if the browser that runs the page is compatible with canvas.

Initially, the canvas is blank and when we want to paint on it we have to access the context of rendering in the canvas, on which we rely on different methods to accessing the drawing functions. The simplified process is as follows:

//receive the canvas element
var canvas = document.getElementById('ball');

// checking if we can find an item and if we can extract its context 
// with getContext() which indicates support canvas 
if (canvas && canvas.getContext) {

   //Access to  context 2d of the canvas, neede to draw   
 ctx = canvas.getContext('2d');
   
 if (ctx) {

      //if we have the context all is fine and we can start to draw      
 //function to draw a circle
     function ball(100,100,30) {
   }

} 

//function to draw a circle
function ball(posx,posy,r) {
 
 //change the color of the filling
 ctx.fillStyle = '#30A543';

 //change the color of the stroke
 ctx.strokeStyle='#666'; 

 //begin path to draw
 ctx.beginPath();

 //draw a circle
 ctx.arc(posx, posy, r, 0, Math.PI*2, true);

 //close path 
 ctx.closePath();

 //draw stroke
 ctx.stroke();

 //fill the circle
 ctx.fill();

}

Animating in canvas

Once we have drawn a ball we will see how to animate it, we will have to create a function to update the position of our ball and another function to clear the canvas

The function to clear the canvas is as follows:

function clearCanvas() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

The function to move our ball is as follows:

function animate() {
  clearCanvas();
  ball(posx, posy, r);

//check collisions against the walls
  if (posx + velx > WIDTH -r || posx + velx < 0 + r)

  velx = -velx;

  if (posy + vely > HEIGHT -r || posy + vely < 0 + r)
    vely = -vely;

//update the position of the ball
  posx += velx;
  posy += vely;

Finally we have to execute the animation function in a given time:

return setInterval(animate, 10);