raphael.js vs paper.js

Problem

What are the main differences between raphael.js and paper.js?

Are there any other libs out there I should look at? Any like these that focus more on CSS3 then SVG?

Thanks!

Problem courtesy of: fancy

Solution

Raphael uses SVG. Paper use Canvas.

That's the major difference.

In terms of what you can do with them, Canvas and SVG each have their own place, and are good for different things (although they are both capable of doing each other's thing as well if you ask them to). From a purely functional point of view, you need to consider what you want to do with the library before you decide which one you go with.

Browser compatibility is going to be a big issue, whichever one you use. This will possibly be a bigger issue than functionality, in fact.

Raphael has an advantage on the desktop because it detects older versions of IE (as far back as IE6) and falls back to using VML instead of SVG. This means it has excellent compatibility on virtualyl all desktop browsers. Canvas simply isn't supported on older IEs, and the Paper.js people don't really seem too worried about it.

But on mobiles, Paper.js may be better, because Canvas has much better support on mobiles than SVG. SVG isn't supported on most Android devices at all. This is changing: Android 3.0 introduced SVG support, but most Android devices being sold even now come with v2.x, so it'll be a while before you can rely on SVG working on a mobile.

For more info about browser support, see the CanIUse site:

Hope that helps.

Solution courtesy of: Spudley

Discussion

The most obvious difference is that Raphael targets SVG, and Paper targets the Canvas element. It also appears that Paper has far greater advanced features, whereas Raphael is just core SVG elements, which can then be expanded upon with plugins. Arguably, it depends more on your need, and which environments you wish to target. Canvas works well on some mobile browsers, SVG barely works on mobile environments at all.

As another side note: SVG, as I'm aware of it, is not hardware-accelerated in IE (9) or Firefox, and, again if my memory isn't failing me, Canvas is, at least in IE (9). As for IE 8 and below, you need a browser plugin, which most have, but it is a dependency to expect.

Discussion courtesy of: drheart

Are there any other libs out there I should look at?

If you have experience in Flash development you might consider easel.js which provides you with some of the flash display mechanisms. Easel looks like a really nice lib to me.

Another interesting library is processingjs, unlike the other libs processingjs also does 3d stuff. (It's also good at 2d.) Unlike paper, raphael and easel processing doesn't handle user interaction out of the box.

Both libraries use canvas.

Discussion courtesy of: metatron

Are there any other libs out there I should look at?

Yes, you should have a look at processing.js!

And by the way - here is an excellent comparison between raphael.js, paper.js and processing.js: http://coding.smashingmagazine.com/2012/02/22/web-drawing-throwdown-paper-processing-raphael/

And even code comparison of the same effect: http://zgrossbart.github.com/3gears/

Discussion courtesy of: mnowotka

This recipe can be found in it's original form on Stack Over Flow.