Claws, fangs, fur...

The past couple of months I've been working at programming a game community web site. One of the applications we include is an altar dress-up, much like a doll dress-up and comparable to the house dress-up at Gaia Online's. We've decided to build this using Canvas, one of the new html5 elements.

Just to piss off the Internet Explorer users? Microsoft's excuse for a browser still does not include canvas support, not even in version 8 beta 2.

No... we are looking forward to Microsoft implementing some version of the canvas element in the near future. We expect they have about 1 year, before the rest of the world passes them by and leaves them behind. Currently, all competitive browsers have versions available that include canvas support to some extent. Competitive... that means Opera, Chrome, Safari, and Firefox (and other Gecko derivatives), ranged from least to most used.

Luckily for us, just in case Microsoft will choose to bereft their unfortunate audience from the powerful abilities of the canvas element, we've ensured our altar dress-up application will do bitmap images too.

Just because we're nice that way.

Unfortunately for us, the quality of the canvas implementations of the browsers mentioned leaves much to be desired. From what we've seen, Opera's implementation is best, and Chrome's is worst. Chrome fails at radial gradients and serialisations, Safari fails at patterns (turning the source image upside down), and everything looks a bit blurry in Firefox. All of them except Opera have problems with arcTo(). Opera also is the only one that currently can output the canvas resulting image and save it to a PNG image. On the downside, Opera has a problem with showing the outer lines of a radial gradient at the desired opacity level, making for jagged edges, and leaves ghost trails of outlines upon resizing outlined elements.

For some reason, we have a problem resizing our canvas elements. The html5 working draft stipulates that the drawing must be redrawn after resizing the canvas... but for some reason, all of the browsers set a limitation of 300 by 150 pixels. The element does get larger... but the drawing is cut off. Very weird, as the drawings themselves are vectors and theoretically scale to any size. Very weird too, as the backdrop on our application is another canvas element, also resized, much larger than 300 by 150 pixels, and has no problem displaying a linear gradient on its entire surface. So that leaves us with a puzzle to solve.

The biggest problem with this application is not the canvas... but the keyboard events used to move elements around on top of the canvas. We know we can use javascript to capture the keyPress, keyDown and keyUp events, and it works pretty decently after figuring out the browser differences and how to start the capture unobtrusively.

The problematic part is stopping the browser from executing their own browser functions after capturing a key combination. Who'd have thunk that Firefox would switch tabs ctrl+page-up? Who'd have thunk that some screen applications rotate the screen on ctrl+alt+arrow? It seems cancelling the original browser functionality seems to work in Opera only... only it works too ambitiously, also cancelling the combinations I chose not to cancel at all, like ctrl+r. It's yet another puzzle to solve.

And this is why we found it safe to start out using the canvas element: it may take a long time for us to figure it all out, and by that time, the specification will be ready and the browsers will have caught up. Well, all of them except Internet Explorer. Shrugs. Not my fault.

One thing I am looking forward to, and may even build myself, is a digitizer application, that allows a user to load any image, then go around clicking from one point to the next, tracing its outlines, and having those points converted to a canvas drawing instruction automatically. That'd increase the amount of available canvas drawings dramatically. That's right: it's my idea, and you heard it here, first.

Other things I predict to see pop up within a year: converter applications that convert Blend, Director, Expression, Flash, GL, Illustrator, Postscript, SVG, V(R)ML, WMF, and WML images to Canvas. From vector to vector. Not that difficult. Just a lot of work to account for all variations.

These are exciting times, opening the internet to a whole load of better looking applications.