Canvas element introduction

<canvas> is an HTML element which can be used to draw graphics using scripting (usually JavaScript). It can, for instance, be used to draw graphs, make photo compositions or do simple (and not so simple) animations.
 
Using the <canvas> element isn’t very difficult but you do need a basic understanding of HTML and JavaScript.
 
The <canvas> element isn’t supported in some older browsers, but is supported in Firefox 1.5 and later, Opera 9 and later, newer versions of Safari, Chrome, and Internet Explorer 9.
 
The general syntax of Canvas Element is as follows :

<canvas id="canvas" width="150" height="150"></canvas>

This looks a lot like the <img> element, the only difference is that it doesn’t have the src and alt attributes. The <canvas> element has only two attributes – width and height. These are both optional and can also be set using DOM properties. When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high. The element can be sized arbitrarily by CSS, but during rendering the image is scaled to fit its layout size.
 
The id attribute isn’t specific to the <canvas> element but is one of the default HTML attributes which can be applied to (almost) every HTML element (like class for instance). It’s always a good idea to supply an id because this makes it much easier to identify it in our script.
 
The <canvas> element can be styled just like any normal image (margin, border, background, etc). These rules however don’t affect the actual drawing on the canvas. We’ll see how this is done later in this tutorial. When no styling rules are applied to the canvas it will initially be fully transparent.