I just started a project using the Canvas. But one of the things I need is to keep track of movable, clickable boxes as in this example : http://raphaeljs.com/graffle.html so I'm wondering if Raphael-js + SVG would be better.
Which would you use? And why?
This answer is copied from my answer to another question. But the OP then changed the question and therefore this answer became less relevant to it. IMHO it is more relevant to this question so here goes:
Think of the difference between canvas and svg as the difference betwee Photoshop and Illustrator (or Gimp and Inkscape for you OSS folks). One deals with bitmaps and the other vector art.
With canvas, since you are drawing in bitmap, you can smudge, blur, burn, dodge your images easily. But since it's bitmap you can't easily draw a line and then decide to reposition the line. You need to delete the old line and then draw a new line.
With svg, since you are drawing vectors, you can easily move, scale, rotate, reposition, flip your drawings. But since it's vectors you can't easily blur the edges according to line thickness or seamlessly meld a red circle into a blue square. You need to simulate blurring by drawing intermediate polygons between objects.
Sometimes their use case overlaps. For example a lot of people use canvas to do simple line drawings and keep track of the objects as data structures in javascript. But really, they both serve different purposes. If you try to implement general purpose vector drawing in pure javascript on top of canvas I doubt you'd be faster than using svg which is most likely implemented in C.
A couple things to decide - do you want your stuff to work in mobile browsers? SVG (Raphael) isn't going to work on android (don't know about iphone). Conversely, if you want something that will work with old versions of Internet Explorer, canvas may not work (not sure if ExCanvas supports IE6), but SVG does to some extent (Raphael supports IE6).
Also, are you just doing animations/drawing, or are you doing a full blown app that might need things like buttons, sliders, tab containers, lists, grids, etc.
If you are creating a complete app and you want it to work on mobile stuff too, you might check out the dojo toolkit, specifically dojox.gfx and other graphical dojox libraries: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/
dojox.gfx is a vector graphics library that supports several backends: canvas, SVG, even silverlight. Here's an article comparing it with raphael: http://www.lrbabe.com/?p=217
Check out also cake.js for a stand-alone scene graph library for the canvas: http://code.google.com/p/cakejs/ And also check out processingjs.