When Canvas doesn't cut it: Raphael.js

http://eng.wealthfront.com/2010/11/when-canvas-doesnt-cut-it-raphaeljs.html

by eishay • 16 years ago

49 10 16 years ago

eng.wealthfront.com

jbail• 16 years ago

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.

pascal-louis2• 16 years ago

Great points, totally agree. Given the hype of HTML5 and canvas, we wanted to make sure to spread the word that it is not the tool that surpasses everything else.

ergo98• 16 years ago

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

You make good points, however I don't think this entry was particularly negative towards canvas, or merit it needing a defense.

However I have to comment on the "different tools for different jobs" bit, as that is a response that comes up in every NoSQL/SQL discussion as well. If you drew a Venn diagram of the optimal uses of SVG and Canvas, just as with NoSQL/SQL, you're going to have a lot of overlap where it's a judgment call. They are different tools that have arguable merits for a lot of the same jobs, which is why it's important to know about both of them.

DanielRibeiro• 16 years ago

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

pascal-louis2• 16 years ago

What's great is that by design, the Raphael library was able to "teach" us this bug. It made the solution a tad harder ;) IE, when will you die?

euroclydon• 16 years ago

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/

igrekel• 16 years ago

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.

gregwebs• 16 years ago

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.

lwhi• 16 years ago

I've read the difficulty is that you need to manage redraws yourself:

https://developer.mozilla.org/en/Canvas_tutorial/Basic_anima...

realugglan• 16 years ago

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)

When Canvas doesn't cut it: Raphael.js

Related Stories