A Quick Lesson on Experimental Interfaces

posted by chip on Monday, the twenty-first of January 2008, at a quarter past four in the morning
I'm a big fan of the canvas tag. It allows flash-like interactive graphics with free, standard tools like HTML and JavaScript. It won't replace Flash any time soon; it's way too slow, and it's not officially standardized yet. It does, however, exist in a number of different browsers in some form or another. By my count, Firefox, Opera, and Safari all support it to some extent.

The idea was originally thought up by the Safari folks, so that it could be used in OS X's Dashboard widgets. Firefox and Opera adopted it afterwards, and it's up for standardization in HTML5. I've used it in several of my hacks, and I think you'll see it a lot more once there's a viable IE implementation.

A while ago I tried to run some of those hacks in Opera, and they refused to work. No errors, no console messages, nothing. I wrote it off as a bug and moved on. I don't use Opera regularly, and I only know one person who does (and he's dating my sister Andrea, which shows you his judgement skills :P). As it turns out, there's some disagreement on what exactly constitutes a valid canvas tag. When Safari thought it up, it was a standalone tag, much like img:

<canvas />

Which makes sense for a few moments. It is an image, right? Well, other people disagreed, since an image is a pretty standard feature with old, but well-defined alternate representations. A canvas tag is a new beast, not implemented by many browsers, and in those browsers, you may want to specify some alternative content more complex than an alt attribute. So the Firefox, Opera, and HTML 5 version looks like this:

<canvas></canvas>

The idea is that your alternate representation goes inside the tag, where it will be rendered by browsers that don't know about the canvas tag. Now here's where it gets interesting.

While the standard format is the tag pair version, Firefox (and presumably Safari) will happily parse the tag in standalone format. Opera will not. Using the standalone format in Opera causes a canvas area to be constructed, but it is programmatically inaccessible. This is obviously a bug, but not a serious one. Five minutes of code editing, and all my hacks work in Opera... which also means they work on the Wii... which means I can start making games. :)

Now if only Opera's canvas implementation was half as fast as Firefox's. :/

reply

All content printed on 100% recycled internet memes.