HTML 5 Canvas vs Flash
Over the holidays I gave myself a break from Actionscript and took a look at the HTML 5 Canvas object. It’s been a while since I programmed any javascript, and AJAX technologies seem to be the popular choice for web apps these days (goodbye Flex!). I decided to port over an old Actionscript 1 experiment to see how the two technologies performed alongside each other, the results can be seen below.
You’ll need a modern browser to view the canvas version (eg: Firefox/Chrome/Opera/etc). View the source of the Canvas version for the javascript.
As you can see they look pretty much identical, the differences primarily lie in performance. The Flash version can handle more than twice the number of snowflakes before the frame rate drops. This may be down to the a fundamental difference between Canvas and Flash: Canvas is a rasterised bitmap object, whereas Flash is a vector animation tool. When you draw shapes in Canvas you’re drawing directly onto a bitmap, the shape can no longer be moved or scaled and is ‘baked’ into the image. In some ways it’s similar to the BitmapData object in Flash. Because of this animation is far easier to accomplish in Flash and I had to adapt parts of the original code to work with the Canvas concept.
Javascript and AS1 share a lot in similarity as programming languages so porting the code was relatively easy. The Canvas object also has a similar API to the Graphics object in Flash. I’ll admit Javascript is not my favourite language, by a long shot, the lack of strict typing is difficult to return to after years of AS3, and in more complex scripts nested closures can get messy. It is however fast to program, which can come in very handy when prototyping and experimenting with ideas.
It may be worth investigating Processing, a framework for the Canvas object written by John Resig, the guy behind JQuery.
Posted: January 17th, 2010 under Actionscript, Flash, Javascript.