So Cassie Lightfitz asked me about the new canvas object in HTML5 and at the time I replied that I don't know anything about it. I was aware of some of the new goodies in the future of the web but I am ecstatic with this new canvas object. The canvas object allows for scripted drawing on the fly, just like you can do in Actionscript. Now I naturally the question I had was ,"which one draws faster"?

So I made very similar scrpts using AS3 and HTML5 javascript. Going in I expected flash to be the fastest, as it natively handles vectors, however I became surprised when I finished both and realized that the HTML5 canvas object can be drawn to many, many times faster than AS3 can draw to a sprite. WOW! My attempt to capture just how fast the HTML5 drawing is processed seem to fail but at least the AS3 will return speed results, keep in mind all build time is in milliseconds (1,000 = 1sec).

Ok, what's one big difference? While AS3 draws in vectors the canvas object draws in bitmaps. My theory is that the canvas object actually caches a copy of the drawn star for reproduction while AS3 has to draw it every time. Try producing some stars for yourself. Warning, more than 100,000 might crash the HTML5 version while over 20,000 can crash the Flash version. If you would like copies of the source code to play around with, download the package HERE.

AS3 Drawing: