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.

For a very long time, I tinkered with Flash. I started like most people, with simple animations that were tweened on the timeline. Over time, I moved away from the timeline and started writing class files and making full use of the display list.

But these days, Flash has fallen out of fashion. It’s not tough to understand why. Flash is expensive, and it’s the kind of thing that can be abused rather easily. I’m not talking about security, either. I’m talking about hefty files will all sorts of animation on the timeline and an aggravating animation to watch while you wait for it to download. Even worse, some sites have Flash intros just for the sake of having one. (Rule of thumb: if you think you need a “skip intro” button, then you shouldn’t have an intro at all. Seriously.)

But for all that, Flash was a king. There was no way to duplicate what Flash can offer. Vector graphics, animation… Flash had a monopoly on the good stuff. Well, until now.

Now we have HTML 5. With the video element, we can show content without a proprietary plugin. And with the canvas element, we can even do animation.

I figured it was time to get started on the transition, so I picked up a book on the subject. It’s an O’Reilly book, of course.

So far, it looks promising. The bad news is that the canvas element doesn’t have a display list like Flash does. Everything gets wiped out and redrawn every time you update it. The good news is that you can manipulate it with regular old JavaScript, and you can easily interact with other elements on a page. For instance, if you want a button to affect the canvas, it doesn’t have to be inside the canvas.

Over all, it looks very promising. It’s an open web standard, so there are bits that aren’t fully supported everywhere, but there’s quite a bit you can do right now. In fact, right now is the best time to learn it. Don’t worry if you’re currently a Flash person. Many of the concepts are similar, even if the language is a little different.

Over the next few months, I’m going to be tinkering with the HTML 5 canvas, just like I used to do with Flash. I’ll be pulling the Flash examples from this site and replacing them with something a little more modern. We’ll see what I can come up with.