When Canvas doesn't cut it: Raphael.js

In canvas's defense, canvas and SVG/VML are different tools for different jobs.

For a charting library, you should absolutely use SVG/VML instead of canvas. You don't need the bitmap properties of canvas, canvas doesn't scale well and you can't transform paths like you can with SVG/VML (without redrawing the whole thing).

To do face recognition, bitmap image gymnastics or build an online Photoshop tool, SVG/VML isn't going to cut it though --- you need canvas. Try making a spray paint tool with SVG/VML. Ouch! Using a canvas that's almost trivial.

Good tutorial on using Raphael though. It's a great library.

Be aware, the one big draw-back of Raphael.js (and its best feature) is that all drawings are declarative JS. So you won't be able to extract and store the generated SVG, in a designer for instance. You could extract it from browsers which support SVG, by getting the XML, but in IE, you're dealing with VML.

A neat project which renders SVG's in Flash for IE, and fakes in the SVG DOM so you can code against it using JS, is svgweb.

http://code.google.com/p/svgweb/

I am happily trying out protovis (renders as SVG): http://vis.stanford.edu/protovis/ex/

I am confused now about canvas: this article says a downside is redraws, but http://thejit.org uses canvas, stating that it is better for animation.

I'm using raphael for a visualization project and it works great. The big advantage over canvas is really more significant when your drawings need to be interactive since you can tie event handlers to graphic objects.

The problems with it are more related to the cross platform nature like the radial gradients in the article. Also translucent shapes don't seem to be transparent in IE. Another thing that I am missing out on is having some kind of scene graph. Raphael has groups of objects but it is a far cry from what you get in SVG.

A small warning: I tried using raphael.js for a project just a couple of months ago and discovered a big flaw. Transformations/rotations and scale-functions are not "stackable" which might come as a nasty surprise after a while.

For example, I designed a number of subcomponents using rotate and scale operators, then I wanted to use them as parts of the whole. The result is very weird when you first get it as it is only the last transformation of each kind that survives which results in everything thrown all around.

But that said, if you stick to one coordinate system you will be just fine. The animation-hooks and the event-hooks might just be worth it. Just don't try to think vectors and transformations/rotations just because it's vector graphics.

(I ended up using canvas and excanvas for that project which worked fine even though the printouts weren't as pretty)

Great hands-on discussion. Too bad Raphael had problems with IE:

it turns there was a bug in IE’s implementation of VML related to radial gradient fills in arbitrary paths... In the end, this was a show-stopper for rendering our pie chart using Raphael