pennypacker.net: Apple's new <canvas> tag

Apple's new <canvas> tag

Apple's latest shipment of WebKit includes a few custom additions, among them is the <canvas> tag and I am awe-struck with the power of this new extension to HTML.

Put as simply as possible, it's a powerful means to draw on a web page. It's sort of like Flash, but without Flash! It's driven with javascript, and you can use it to draw and fill vector lines and shapes as well as place raster art. Canvas even provides the tools even to rotate, scale, add transparency, and even render drop shadows. It's a very simple, well thought out little addition.

The bad news is that canvas is not part of any HTML or XHTML spec, and it's really not suitable for widely deployed internet use. Browser support for this new extension is weak, so don't expect to see it popping up often in web pages. Safari 1.3 and newer supports it, and mozilla has recently rolled <canvas> support into their rendering engine as well. I haven't had the opportunity to test it in Mozilla yet, but support for it is indeed an interesting development. I don't expect Internet Explorer will ever incorporate it because it's a good five years behind every other browser anyway.

But don't let the bad news scare you. Apple introduced the <canvas> tag for use with Mac OS X's new Dashboard, and not for the web, so HTML specs are largely irrelevant. It's remarkably useful and powerful and suits Dashboard's very well because users expect interactivity, and thei tag delivers. To cite an example, the Hula Girl widget weighs in at 1MB because of all the images involved. Not so when <canvas> is deployed. I've been re-writing Hula Girl from the ground up to make use of the new tag, and the file size is cut in half. The current method for making Hula Girl work is to use eight images: one for the base, seven for the individual frames, and then swap out the pictures in sequence to create the the animation. The new method requires just two images: one for the dancer, one for the base. All of the motion is created with javascript thanks to the <canvas> tag.

It allows for a remarkable amount of flexibility. The animation is smoother, and it's easier to change the speed without the animation appearing bumpy or stuttered. I've spent some time today working on a simple version in Safari, and for those visitors who might have Safari, or who wish to test the latest support from Mozilla, can see the test work that I've completed on Hula Girl. It uses just two images, it loads faster, and the animation is much smoother. As a developer, it leaves me with a great deal of flexibility as to how the animation plays. I just can't say enough good things about the <canvas> tag, it's truly an amazing thing.

We can only hope that the W3C will embrace the <canvas> tag for use on the web, or at least some variation on the theme because it would open up a great many doors to fantastic DHTML interfaces. Javascript and CSS do a good job on their own, but another tool in the belt is always a welcome addition. So while we may not ever see <canvas> widely used on the web, we've got Dashboard to enjoy it in now.

under:

Web Development

Widgets

Posted on

2005-05-13