Probably one of the most exciting new features of HTML5 is the canvas. You can use it to create drawings anywhere on a web page. The only way to do this previously was by using some other technology such as Flash, SVG, or some other browser plugin.
The HTML5 canvas is both an element and an API. The <canvas> element defines a rectangular area of a web page where graphics can be drawn. The canvas API works with a <canvas> element to provide the JavaScript interface to draw on the canvas. It is a low-level set of functions for drawing lines, rectangle, circles, and other graphic primitives.
The <canvas> element itself is very simple. You must set the width and height attributes to specify its size. You can optionally put content inside the <canvas> element to be displayed for browsers that don't support it. The good news is that the HTML5 <canvas> element is widely supported by nearly every modern browser. The following code creates a canvas element...