2 Reasons HTML5 Canvas is Bullshit

Experiment time... Mac users, open a Terminal. Type the command "top". This will show you processes that are running and the resources they are consuming. Now, open this link in a new tab:

http://cs.helsinki.fi/u/ilmarihe/canvas_animation_demo/mozcampeu09.html

Wait for it to load, then click to start. While it animates, check out how much CPU Safari is using. On my 1997 MacBook Pro (dual core), it's using 90%+ of one core. It doesn't seem like such a difficult animation. And this is how the all-knowing Steve Jobs says we should do animation now instead of using Flash.

So here's a Flash example that appears to do a lot more animating:

http://www.northallegheny.org/academics/Art/multimedia/animation/forest/trees.html

On my same MacBook Pro, Safari uses about 45% of one core to keep that running.

Since I knew the HTML5 Canvas example (the first one) was such a pig, I asked someone who has an iPad to try it out. It was too slow to be tolerable. I also tried it on my Nexus One in both the Google Browser and Skyfire Browser. Both are WebKit based. Neither was able to draw the graphic characters. Google Browser did the captions and the rotating box parts of the animations. Skyfire kinda hung there.

There are couple of conclusions to draw from this...

(1) The poor performance of that first animation is because the author of it is redrawing the whole scene for each frame being drawn. That is moving a lot of bits! And so that's why it takes so much CPU for what appears to be very simple incremental changes.

A problem with HTML5 Canvas is that this is an obvious way to do animation. It lets the developer do it very inefficiently. Flash, by contrast, doesn't bother the developer with that particular decision. The developer sticks some objects in the frame, tells them what to do, and the Flash runtime handles it more efficiently. So this is a case where 3rd party middleware promotes efficiency and would promote better performance and battery drain than a "native" solution. It does better by ensuring that the developer does the right thing.

(2) Today, we can pretty much depend on Flash objects to run consistently across platforms. HTML5, even from the same WebKit open source doesn't seem to have that consistency yet.

I really hope the developer of that HTML5 Canvas example doesn't take that page down. It is like a gift that will keep on giving for those of us who are skeptical of Apple's anti-Flash crusade.