HTML5I hate Flash.

Shockwave was cool when it first came out. And those stickman ninja spy animations were fantastic when Flash was first released. But overall it’s been abused. Whenever I see a Flash nav menu I die a little inside, no matter how fancy it is. So I was super excited when I started reading/hearing about HTML5 Canvas.

Don’t get me wrong… Flash has its place. But it’s not on the World Wide Web. It’s much more appropriate for designing interfaces to applications (touch-screen remote controls come to mind) or cool animated cartoons than it is for websites. I can’t tell you how many times I’ve closed a page the second I see a Flash loader. It just irks me. When I’m surfing, I’m looking for information. Flash just gets in the way.

Having said that, when a site offers me a choice between HTML-only and Flash version, I sometimes choose Flash. But it depends on the site. If it’s a multimedia (movie / recording artist / etc.) site, I’ll generally choose Flash because I want the “full” experience. If it’s anything else I choose HTML. I can’t Ctrl-F (or Cmd-F on Mac) Flash. I can’t view source of Flash. I can’t keyboard-navigate Flash (most of the time). Flash doesn’t add to my experience, it interferes with it.

Enter Canvas.

An HTML standard allowing pixel-by-pixel drawing and animation inside the browser with no plugins required. I’ll admit that I’ve been kind of afraid of doing anything with the <canvas> tag, mostly because my math skillz just aren’t what they used to be, and <canvas> is all about math. But today I decided to take a bit of a plunge.

I decided I needed some grass waving in the wind for the header of the theme I’m working on for this site. Animated gifs came to mind, but <canvas> seemed cooler. So I did a little searching and found some options that have already been assembled. But herein lies the problem.

The first example which is pretty much exactly what I was looking for is here.  It’s not that fancy, but it gets the job done, and as I said it’s pretty much what I was envisioning. The problem with it is that it chews up about 30-35% CPU while it’s running! Seriously! 30-35%! Exclamation mark!

So I looked a little more, and found this beautiful option. And it’s straight JS (the other one uses MooTools) so easier to implement on a jQuery site. And it’s beautiful. But the problem… it chews up 90-100% CPU!!! SERIOUSLY!!! 90-100%!!! THREE EXCLAMATION MARKS AND CAPS LOCK!!!

What this all means is that I’m probably gonna end up with an animated gif for my wind-waving grass. But what it means to <canvas> is more problematic. Even on Safari which supports hardware acceleration on the Mac it was only saving about 5% in each example (I suppose the hardware acceleration is limited to 3D – though how an architecture could be designed that allows a 3D animation to utilize less raw CPU than a 2D animation is beyond me). Flash doesn’t come anywhere near being this processor intensive. So either the browser <canvas> implementations need to get FAR more efficient, or <canvas> is pretty useless for animations. It still works ok for static images, and the other day I found this amazing library that lets you perform image manipulation right inside the browser (rather than having to AJAX-ify it and pass it back to the server). But for animation it’s really pretty useless right now.

Here’s to hoping it improves both drastically and rapidly.