HTML5 : The canvas element

The canvas element is actually a rectangle of space, ie a two dimensional grid. With this canvas element we can render graphs, game graphics and other visual images and use javascript. It has no content and border of its own.

The mark up for creating a canvas,

canvas id = "a" width = "200" height = "200" /canvas

Define a variable and assign the canvas element by id.

var a_canvas = document.getElementById("a");

After finding the canvas element in the DOM invoke its getcontext method, the context is where all the actions on canvas take place. Pass a string 2d to the function. Now we got the context.

var a_context = a_canvas.getContext("2d");

Now we got the canvas and its drawing context, where all the drawing methods are defined like fillStyle, fillRect,fillStroke etc. Now draw a rectangle in the canvas.

a_context.fillRect(0,0,200,200);

The parameters indicate starting x,y coordinates and width and height.