Saturday, May 1, 2010

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:

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:

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.


  1. I have a bb.

    3rd reason: Do a "view source" on that page.

    no thanks:)

  2. Flash ... is not running at iOs devices, so 1/3 of (modern) mobile devices will not show the content.

  3. I am a website designer, only have a flip phone, and find HTML5 to be a hype machine.

  4. no worries, modern mobile devices will run Windows -
    So... there is Flash player and HTML5 is only for shit slow performing iPads.

  5. So you got a bad example of javascript and compare it to a good Flash... nice... That's why programming is for programmers, not designers...

    Some point in the future even people like you could use HTML5 Canvas with piece-of-cake difficulty, that is fast and reliable as any other animations, because its just 2d graphics context. Browsers can even implement video card acceleration on it, because it's a concept, not a platform. And that new tools will be mature as Flash, because the script you take as bad example to not cry without your precious flash is really poor.

  6. Previous anonymous, you ignorant sl*t! As an aside, I'm a developer who dabbles in design, and I've done a wide range of things with a wide range of tools. Among the lowest level have been graphics routines optimized for AltiVec and SSE.

    But the real point here is that you've inadvertently made my point for me. Thank you very much. I wrote this post almost two years ago, and today, you're claiming that HTML5 canvas could potentially, eventually deliver the performance that Flash developers expect. Brilliant, mate! Just be-fricking-rilliant.

  7. Thanks for the share. Keep posting such kind of post on your blog. I just bookmarked it for continuous visit.
    html5 player


Do us all a favor when commenting... First, let us know if you have used an iPhone, any Android phone, and/or the Nexus One.