Client-Side Graphics with <canvas>

The canvas element is used to render simple graphics such as line art, graphs, and other custom graphical elements on the client side. Initially introduced in the summer of 2004 by Apple in its Safari browser, the canvas element is now supported in many browsers, including Firefox 1.5+, Opera 9+, and Safari 2+, and as such is included in the HTML5 specification. While Internet Explorer does not directly support the tag as of yet, there are JavaScript libraries^[3] that emulate <canvas> syntax using Microsoft’s Vector Markup Language (VML).

^[3] Circa late 2009, the most popular IE <canvas> emulation library is explorercanvas, available at http://code.google.com/p/explorercanvas/.

From a markup point of view, there is little that you can do with a <canvas> tag. You simply put the element in the page, name it with an id attribute, and define its dimensions with height and width attributes: