Part 8

Working with the Canvas

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 tag 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 that are 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, and Firefox all support the canvas tag elements completely. (To be honest, pixel-level manipulation is not available in Firefox 3.x, but is in Firefox 4.) The one notable holdout is (you probably guessed it) Microsoft. As of IE8, the canvas tag is still not supported, although support for the canvas element is promised for IE9. In the meantime, the ExplorerCanvas project available at http://excanvas.sourceforge.net is a promising alternative. It allows an easy way to add canvas functionality to even the older ...

Get HTML5 For Dummies® Quick Reference now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.