HTML5 Canvas

HTML5 canvas element creates a rectangular space where you can use JavaScript to conduct drawing operations, use images, process transformations and create shapes. Web pages can use this canvas element to make visual effects, that can control the canvas area as precise as individual pixels.

Element

The canvas tool can be included by Web pages by including a canvas element :
<canvas id="canvasEl" width="500" height="400"></canvas>
var theCanv = document.getElementById("canvasEl");
var cont = theCanvas.getContext('2d');

Shapes
Developers can define lines, paths and shapes within a canvas using JavaScript:
cont.beginPath();
cont.moveTo(55, 105);//x, y
cont.lineTo(155, 210);//x, y
JavaScript can specify shapes for a context object to draw as :
cont.fillRect(15, 55, 120, 120);
This starts from X position 15 and Y position 55, drawing a square shape 120 pixels across.