The Canvas Object: 2-D Graphics for Browsers

History of the HTML Canvas

When Apple shipped Mac OS X 10.4 “Tiger” last year, it included the Dashboard and Widgets. Widgets are almost completely platform-independent, built with HTML, JavaScript and CSS and the Dashboard is a desktop-sized layer that could be called up instantly to show all installed Widgets. The “almost” above is deliberate since the release of the WebCore browser engine in Tiger included special hooks through which scripts could call system utilities (like executing local scripts or getting system information).

It also introduced the Canvas object, through which JavaScript could perform drawing operations such as those found in the 2-D API of a modern operating system. The fancier widgets built their cool fading, flipping and drawing effects using the canvas (though the developers achieved a lot with transparent PNGs and CSS as well). The canvas was so obvious that Firefox and Opera quickly announced support for it. It has since evolved into a de-facto standard for a modern browser[1].

The Canvas in Action

Reflection DemoIf you have one of these browsers, you should be able to enjoy the demonstration and sample code found in the Reflection Demo. A quick look at the source reveals a very plain HTML document with several embedded images. The images themselves do not contain the alpha-blended reflection seen beneath each one—that’s the effect applied by the “reflection” class present on each image. The accompanying JavaScript finds all elements with the “reflection” class and extends the image with a custom reflection built by extracting and compositing pixels from the image itself. It’s very fast and extends the power of CSS to image manipulation.

Image manipulation in <canvas> by Arve Bersvendsen has more examples and tips for using the canvas, including individual color channel manipulation and more dynamic effects, like hard and soft spotlights. The effects are rendered extremely quickly and fluidly and bring a gee-whiz effect to simple web pages not seen outside of Flash. These effects could also be achieved with SVG[2] or Flash, but it’s nice to be able to stay in the familiar world of HTML/CSS/JS.

Canvas’ Limited Audience

The canvas opens up a new world of integrated, dynamic effects to web developers—effects that 90% of the market will never see since Internet Explorer shows no signs of either including new technologies in any soon-to-be-released version. That means that major sites are unlikely to start dazzling you with download-friendly (effects are rendered locally without extra images) effects to improved your browsing experience. Though many of the uses of the canvas will likely be in making advertising more annoying, it is also highly likely that web application interfaces can be drastically improved in their usability and gesturing (indicating what happened where).

On the other hand, the demos look really nice; specialty web sites that don’t mind spending money on an effect that only appears for 10% of its users will start using the canvas to stand out from the rest of the crowd.