Download FlashCanvas 0.1
Released under the same Apache License as the exlorer canvas project.
What is FlashCanvas?
FlashCanvas is a canvas tag to flash bridge for browsers which do not support the canvas tag like Internet Explorer. FlashCanvas is an experiment to see if any performance improvement could be realized by using flash technology. The javascript code is a fork of the ExplorerCanvas project:
Firefox, Safari and Opera 9 support the canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages.
This FlashCanvas release only implements lines and fills. This is enough to support example1 and example2 from the ExplorerCanvas project.
FlashCanvas was put together in one day of hacking so it is pretty basic and has many bugs/quirks.
How does it work?
FlashCanvas is modeled after ExplorerCanvas which means it should be a drop-in module which provides canvas support. There are two main components combined together: the very basic FlashCanvas.swf flash file which compiles down to 688 bytes and the FlashCanvas.js wrapper/controller file. swfobject.js is used to embed flash into the page.
The FlashCanvas.js file implements a fake-canvas object and changes the existing canvas element into a a flash object (using swfobject.js). The javascript intercepts canvas commands and forwards them to the FlashCanvas.swf movie file using the ExternalInterface provided by the flash player. The flash movie clip then interprets the command and draws accordingly.
note: you must serve the files remotely. There exists a flash player bug which does not allow local connections to communication with actionscript from javascript using ExternalInterface even if permission is granted. (AS to JS does work with local connections however). A python script for running a SimpleHTTPServer instance is provided for testing purposes.
Why is ExplorerCanvas slow?
Although I'm not an expert on ExplorerCanvas, it is clearly not designed to do motion graphics. Almost everything ExplorerCanvas does is string manipulation to construct markup which is re-interpreted by Microsoft's Vector Markup Language. This method works sufficiently for static graphics but does not work well for motion graphics.
Does FlashCanvas provide better performance?
The short version: not really.
The longer version: All drawing commands are being forwarded from Javascript -> ExternalInterface (down into the browser) -> ActionScript -> Flash Drawing commands. This is a lot of overhead for drawing code. Doing something simple like a moveTo and lineTo would result in at a very minimum 8 separate levels of indirection.
FlashCanvas performance is discussed further here.
What other approaches could be taken?
Some other ideas:
- Stop using broken browsers like internet explorer - We can dream...
- A separate canvas plugin for internet explorer - this wouldn't be too difficult if the cairo graphics library were used as a starting point.
- a more practical approach would be to abstract the canvas interface away by writing code targetted at the Processing language and then implement a processing flash interpreter (if one doesn't exist already)
How do I build FlashCanvas.swf?
The FlashCanvas.swf file is compiled using the MTASC and swfmill compilers.
Once those are installed run:
make
