It used to be that if you wanted to draw—curves, shapes, and polyhedra—with Javascript, you would have been out of luck. However, almost all modern browsers now supportcanvas, which is a nifty technology that finally lets Javascript out of its DOMy prison.

For the most part it works well. To see it in action, take a look at the always-excellent John Resig’s Processing.js, Ilmari Heikkinen’s CAKE, and my own Algorithm Ink (which I’ll write more about soon).

Standards Compliance

In the grand tradition of browser technologies, Canvas isn’t fully supported by everyone, yet.

Firefox 3 and Opera 9.5 both get good marks. Ironically, it’s Apple—who originated the technology—that hasn’t gotten around to implementing some of the basics. In particular, Safari isn’t yet standards compliant and doesn’t implement the fundamental setTransform and transform. Transform is, however, supported in the the nightly build of Webkit.

IE is the only browser that doesn’t support Canvas at all (although, with Google’s excanvas you can pretend that it does).

To see exactly how well your favorite browser does, head over to the test report generator. Do note some of the tests are fairly pedantic and don’t have much real-world meaning. To see how your browser stacks up against other browsers, go here. The same caveat still applies here as well, so take them with a grain of a salt.

Speed Tests

In general, Safari is always the fastest, followed closely by Firefox (in most cases), with Opera lagging in far third. Excanvas-enabled IE wasn’t really aware that the race had started. In general, it looks like what slows Firefox down is stroked arcs, while for Opera it’s filled arcs.

You can find the code for the tests here. I averaged the render times over 10,000 draws

Excanvas-enabled IE uses VML under the hood, so every object you draw remains as a live, unrasterized object that eats memory and potentially CPU time. This means that I wasn’t able to test IE in the same way I tested the other browsers: making 10,000 smiley faces causes IE to collapse into an unresponsive mess and die (IE can’t handle all the happiness?).

You can also see how the time increases as more and more objects are added in IE: Drawing 100 circles took only 1.1ms per circle, drawing 10000 circles took 2.14ms per circle, and drawing 50000 took a whopping 21.77ms per circle.

RT @azaaza Cross Browser Canvas Support & Speed | Follow @azaaza on Twitter | All blog posts