Animating with the HTML5 Canvas Instead of Flash

I finally got a chance to see the real differences between canvas and Flash. I built a neat little solar system animation with the canvas, which you can see here. It’s similar in many ways to something I did in Flash a couple of years ago, so I had some basis for comparing the two. This isn’t a tutorial post, so I won’t go into too much detail about the code.

First of all, the canvas is fun. I built a star field animation at work last week that had several of us gathered around one machine, tweaking variables and trying out the API. It’s the kind of stuff that you could only do in Flash before, except that we’re just using Javascript. It was so nice to know that we could pursue this without paying a ton of money to Adobe. Eventually, I had to put a stop to the tweaking. After all, we were just building a 404 page. If we keep adding new features to the canvas, we’ll never be finished with it.

But I digress. Here are some ways in which the two differ. It’s not a complete list, of course.

Good Stuff

The canvas can draw programmatically, and can perform many of the tasks that we use Flash for. Circles, arcs, lines… you can do all that stuff with no trouble. Plus, it’s not restricted to the box it sits in. You can use JavaScript to pass information back and forth from the canvas to other parts of the page, (such as a form) and you don’t have to have a special program to debug things. This is especially important for a corporate environment. After all, you can’t debug somebody’s Flash code if your company machine doesn’t have Flash. Canvas promises to bring real animation to the web, and we’ll all be able to use it.

Also, much of the code is reusable, just like AS3 code. Once you learn something, you can easily adapt it for new situations. The star field you see in the solar system is the same one I built at work, with only minor adjustments.

The Bad Stuff

Two words. Browser Compatibility. Or more to the point, Internet Explorer. With Flash, you’re free to use fonts, images, and whatever else you like. If it works on your machine at home, it will work for the user’s desktop. But with canvas, you still have to worry about which browser is ahead, which is behind, and which features are common to both of them. You have to find a balance between moving forward and not leaving folks behind.

I tried my solar system animation in several browsers on my Mac, and the same several on my PC. The general results were surprising in a couple of places. As expected, my Macbook ran everything really well in every browser. On the PC, I got nice results from Chrome, Safari and Internet Explorer 9, but Firefox was rather choppy. (WTF, Mozilla? How did Microsoft get past you?)

Adjustments and Conditionals

In an effort to reduce the lag, I thought I would try to limit the number of canvases being used. At the time of this writing, there is a snowfall animation in my header. Could this be using too much processor power? I doubt it, but why not conserve anyway?

My WordPress theme is already set to pull in the extra JavaScript only if there’s a canvas on the page. (I put the id and the script’s filename into Custom Fields, and build the url from that. No custom field, no JavaScript link.) Just to save a little more, I set it up to only use the header animation if there’s no custom field for the page. If you go to the solar system page, you’ll get a lovely sunset photo of Lake Champlain. I’m not sure how much power I’m saving, but at least I got to play with some PHP while I was doing this. I’ll check the page from work, just to see if there was a problem with my PC at home.

My Conclusion

Although the HTML5 Canvas isn’t a complete Flash-killer, it’s getting there and it will only gain support as time goes by. Now is an excellent time to start using it.