HTML5 Canvas for beginners

The canvas element is used to draw graphics, on the fly, on a web page. It is only a container for graphics. We must use a script to actually draw the graphics.

***Internet Explorer 8 and earlier versions do not support the canvas element.

How can we create the canvas element

In order to create a canvas element, use the following markup:


As you can see above, I used an id attribute in order to referrence it later using javascript.If you want to style your canvas you can use the style attribute.

 
How can we draw onto the canvas using javascript 

As I mentioned earlier, after we create the canvas, we use javascript in order to draw something onto it. For example if we want to draw a red rectangle we use following markup, inside a script javascript tag.

I will briefly explain the code. First we find the canvas element with the id attribute, and then we call its getContext() method, passing the string "2d" as an arguement.

***The getContext("2d") object is a built-in HTML5 object, with many properties and methods for drawing paths, boxes, circles, text, images, and more. 

At last we set the red color and draw the rectangle.

Read more examples

*** For more examples visit http://www.w3schools.com/html5/html5_canvas.asp