

When Canvas doesn't cut it: Raphael.js - eishay
http://eng.wealthfront.com/2010/11/when-canvas-doesnt-cut-it-raphaeljs.html

======
jbail
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-louis
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.

------
euroclydon
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/>

------
gregwebs
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
I've read the difficulty is that you need to manage redraws yourself:

[https://developer.mozilla.org/en/Canvas_tutorial/Basic_anima...](https://developer.mozilla.org/en/Canvas_tutorial/Basic_animations)

------
igrekel
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.

------
realugglan
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)

------
DanielRibeiro
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-louis
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?

