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.
Posted: January 17th, 2010 under Actionscript, Flash, Javascript.
Comments: none

