What Is the HTML5 Canvas Element?

By Andy Harris from HTML5 For Dummies Quick Reference

1 of 8 in Series: The Essentials of the HTML5 Canvas Tag

The canvas element is one of the most interesting new developments in HTML5. While the <canvas> tag is an HTML tag, it really isn't interesting without JavaScript programming. The canvas element provides a graphics context, which is an area of the page that can be drawn upon with JavaScript commands.

Canvas supplies a rich toolkit of drawing operations that may very well revolutionize the Web. Innovations in the canvas tag — along with advances in the speed of JavaScript engines — may very well lead to new uses of the Web. A number of developers have developed games with the canvas tag and JavaScript that would have required Flash or Java just a few years ago. Also, the flexibility of canvas could lead to entirely new visual tools and widgets not based on HTML, which could have profound implications on usability and user interfaces.

The canvas tag is supported by nearly all current browsers. The latest versions of Chrome, Safari, Opera, Firefox, and Internet Explorer (IE) 9. (IE8 and earlier don't support canvas, but the ExplorerCanvas project allows an easy way to add canvas functionality to even the older versions of IE.)

Although many of the features of the canvas element (shadows, transformations, and images) are available through other parts of the HTML5 universe, the implementation of the various canvas elements is identical on all browsers that support the platform.