Monday, May 12, 2008

Canvas tag a Flash killer?

I'm mid-port of my Untitled FWS project to make use of the canvas tag. Here are some notes:

  • Since I'm cheap and haven't pirated Flash I use MTASC + swfmill to create my flash stuff which means my source is written in ActionScript version 2. Porting this code to javascript doesn't require a whole lot of changes.

  • Performance of the canvas tag isn't bad, considering the rendering loop is coded in an interpreted language. In my case I am creating an animated scene and the canvas tag is probably (don't know for sure) redrawing the whole thing every frame; Flash would limit redraws automagically based on what parts actually changed.

  • Firefox version 2.0.0.14 on OS X clearly has a very large memory leak dealing with the canvas' drawImage function that causes it to eventually crash after eating all available memory up. (This can be seen by simply setting an interval and continually drawing an image into a canvas element)Update:This appears to be just for OS X, the Windows version of Firefox 2.0.0.14 doesn't explode.

  • Firefox version 3 Beta 5 has plugged the leak and decreased CPU usage overall

  • Limited No text support in canvas elements in common browsers. however the HTML5 draft teases us with talk of rendering HTML and CSS into a canvas... THAT would be nice

  • No real IE support means this is basically not an option -- yes, there is an emulated canvas library from google but from the CAKE demo page it sounds like it doesn't work very well.

  • javascript intervals get called more regularly by Safari than their actionscript interval equivalents in my experience -- I think this is caused by some weird interaction between the flash plug-in and the safari browser

  • Blend modes are available and actually work without a huge performance penalty. this is better than current SVG blend mode support which relies on filters which aren't implemented (meaning there is only source-over fallback)