The HTML5 Canvas element is a natural area for a Flash developer to explore so I decided a while back to play around with some of the options out there.
Libraries such as Gm2d from Hugh Sanderson and the PushButton port called Hydrax have been interesting but I found the TouchMyPixel libraries to be particularly helpful. Specifically, I like how they manage to use the Flash Authoring environment in their workflow even if they are not targeting the Flash Platform.
The TouchMyPixel code looked like a great way to further my knowledge of how to use haXe so I ended up forking their repository on my GitHub account and set about playing with the code and seeing if I could add support for EaselJs.
EaselJs is a library written by Grant Skinner and his team. It effectively provides a displaylist for drawing on the Canvas element. The API design is clearly influenced by his Flash background since it provides a Flash-like displaylist but without it being identical to the Flash Displaylist. I was very happy when I discovered that Zjnue had already written the EaselJs externs for haXe.
What is nice about this approach is that I am using Flash CS5 to design layouts for Canvas-based applications and I could even make the same game or simulation also target the Flash Player. As an added bonus, the TouchmyPixel codebase has in-built support for Box2d and it didn’t take too much effort to get it working with EaselHx.
Click on this preview image to launch the Canvas demo. When open, click on the play button to start the simulation:
Click here to see a version published as a SWF file.
A screenshot of the demo being created in Flash CS5: