SVG vs CANVAS (Snap.svg vs FabricJS)

Question

I made a speedtest to compare Snap.svg (SVG) to FabricJS (CANVAS): http://jsbin.com/tadec/7 function dummy() .

In Chrome SVG renders in 120 ms, while CANVAS renders in 1100 ms. SVG is 9x faster than CANVAS.

Fabricjs.com page says in this example that Raphael takes 225 ms and Fabric takes 97 ms (parsing: 80, rendering: 17).

I have had an impression (after reading fabricjs.com and paperjs.org ) that FabricJS and more generally Canvas is faster than SVG.

My speed test claims that SVG is significantly faster than Canvas (at least Snap.svg seems to be significantly faster than FabricJS).

Why FabricJS is so slow in my test? Have I made some mistake in comparison, because I'm surprised that SVG seems to be faster than Canvas in my speed test.

EDIT: My question is two-parted: Why rendering speed is so much slower in FabricJS and why dragging speed as well?

Answer 1

Your benchmark is broken in my opinion, because beside measuring drawing to canvas you are measuring parsing of a huge string containing a path, over and over again. Separate this code out of the loop and you should get more reliable results.

Measurements that are provided for canvas libraries are provided for drawing, not for parsing or other pre-processing work. If you use canvas like you use SVG, then yes, it will be slower. It is not intended to be used like SVG. FabricJS provides a way to do that, but it is not optimal. One solution would be to parse path once, and then use same path over and over instead of parsing it every time.

Also, measurements are given probably for drawing a canvas, not for interaction with parts. As you say in comments, rendering may be improved, but why does dragging a shape take so much longer? Because:

1. maybe path is being reparsed on each redraw (not sure how FabricJS works)
2. because SVG can redraw only certain parts of image that you are moving, and canvas is usually redrawn completely. Why? Because you can't "erase" part of canvas where a shape used to be. So entire canvas is erased, and new positions are redrawn.

Why do then people say canvas is faster than SVG for such scenarios? Because it is if you use it properly. It will be more work, but it will work much faster.

1. Don't use SVG paths for drawing shapes, or use simple paths and cache them
2. Cache shapes which you use often into off-screen (hidden canvas) and then copy from that canvas onto visible canvas when needed
3. If you have multiple independant layers of an image (for example 3 layers in a game, if you have background sky which is moving, background mountains which are moving slower and a character), use multiple canvases. Put canvases one over another, draw sky on the bottom canvas, draw mountains on second canvas and draw character on top canvas. That way, when character on top canvas moves, you don't have to redraw entire background.

I hope my answer is useful for you :)