HTML5 in the browser: Canvas, video, audio, and graphics

Where Chrome, Firefox, IE, Opera, and Safari stand on HTML5 Canvas, HTML5 video, SVG, and WebGL

Page 2 of 5

HTML5 Canvas

There may be no greater apostasy in HTML5 than the creation of the <canvas> tag, a marker used for reserving a rectangular chunk of real estate where JavaScript code can manipulate individual pixels. In the original vision, HTML was a markup layer for the data only. The browser was responsible for deciding how to render the data in the best possible way for the current reader. And the scalable vector graphics set of tags -- now often considered part of HTML5 -- was the right way to draw lines by putting the information in an endless stream of tags.

Alas, artists don't think like computer programmers, and they don't grok the idea of separating the data layer from the presentation layer. When they want to put down a letter or a dab of color, they want it in one place and they want it to stay there -- or the harmony of the design will be forever destroyed.

The solution is the <canvas> element, an idea that originated with Apple, which incorporated <canvas> into the WebKit project. From there, it was copied by everyone but Microsoft. Eventually, Microsoft capitulated and added the option in IE9, but only after realizing everyone was using a free translation tool that mapped all of the methods from the <canvas> element into their own version.

Though Microsoft has joined the standard version, there are still differences between the results. Philip Taylor built a very complete set of tests for the Canvas object that runs through all of the various ways JavaScript can apply dabs or washes of color. Many of the most common routines -- like drawing a line -- are now implemented in more or less the same way in all browsers. However, there continues to be a surprisingly large number of areas where the browsers don't produce the same results from the same code. Many of the routines for rendering text and gradients act differently or just crash.

To test the Canvas tags, I built a set of flying links that are animated using a jQuery plug-in written by Graham Breach. The code looks for a set of links in your HTML, then starts drawing them in a cloud that rotates in response to the mouse. It illustrates a few of the actions that can be achieved with the Canvas element.

The code won't work in IE8 and earlier versions of Internet Explorer, which don't support Canvas directly, but it will work if you use a thin translation layer called ExplorerCanvas. This code will turn Canvas calls into code that is understood by the earlier browsers, a technology Microsoft called VML (Vector Markup Lanaguage). This translation layer will be necessary for anyone who needs to support the older but still very common versions of IE.

Native <canvas> support in current Web browsers

Apple Safari 5.0Yes
Google Chrome 8.0Yes
Microsoft IE 8.0 / 9.0No / Yes
Mozilla Firefox 3.6Yes
Opera 10.60Yes
| 1 2 3 4 5 Page 2
From CIO: 8 Free Online Courses to Grow Your Tech Skills
View Comments
Join the discussion
Be the first to comment on this article. Our Commenting Policies