What are the pros and cons of HTML5 Canvas vs. SVG + Raphael.js?

Question

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?

Answer 1

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.