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.
But I digress. Here are some ways in which the two differ. It’s not a complete list, of course.
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?
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.