I’ve been playing around with some of the new features in HTML5, particularly to see how the canvas stacks up to Flash. One of the things I wanted to test was javascript performance, so I ported this Flash toy I wrote a few years ago. It’s a physical simulation of a double pendulum system. It’s interactive, and it can export the line drawing it produces as a PNG.

How did canvas+JS do? The export was a lot easier: I had to write a PNG encoder in Actionscript for the original version! Pretty much everything else was harder. Canvas has features similar to Flash 5, and I missed modern Flash’s rich standard library. CSS layout is still somewhat inferior to Flex for GUI design, as the layout options are less flexible.

One of the appeals of canvas is mobile support, but I was disappointed by the performance on my Motorola Droid. Just clearing the background on a canvas larger than 500×200 took the frame rate to single digits, and I couldn’t find a reliable way to make the canvas fill the screen if other elements were present (I didn’t look too hard, since a canvas that large was unusable). The javascript performance was fine, it was just the drawing that caused problems. Let me know if you get better results on different hardware, I’d love to know that this can work better.

Overall, canvas shows promise, but I don’t think it’s ready to replace Flash for complex graphical applications.

Want to embed this on your own site? I’ve put an embeddable double pendulum simulation at Clockwork Magpie Studios.