Pixels, HTML5 Canvas Style

I have finally forced myself to fiddle a little with the canvas element that’s part of the HTML5 spec. It has some pretty groovy facilities, but I’m still playing around getting a feel for what it can do well and what it does badly. So far, it seems reasonable at primitive writing operations, easily handling 6,000 opaque filled rectangle draws at 30 frames per second:

This drops a bit (as you would expect) when you add semi-transparency to things - hit the “blur” checkbox to try it. Sadly, it’s totally pants on my iPhone. I rather suspect the Flash particle test I knocked up will somewhat outperform the current canvas version I have on mobile.

Hoewever - early days. I cobbled this together in an hour with some hasty skimming over the canvas stuff. Doubtless there are many things I’ve missed which may improve the performance. I’ll plug away at it for a bit to see where it goes.

The source code for it all is available on github, or just view source on the page and look at the linked JS files.