Question: Is canvas more suitable than svg in the following case?

Case: I'm drawing a chart (using d3js library) similar to this one (but with much more data):

.html

It's based on an svg and it works fine for several thousands of lines (up to 5000), adding more lines (svg path) decreases the performance dramatically (scrolling in the page bees slow)

Keep in mind: That I need to add mouse events (which is handy in svg)

Question: Is canvas more suitable than svg in the following case?

Case: I'm drawing a chart (using d3js library) similar to this one (but with much more data):

http://mbostock.github./d3/talk/20111116/iris-parallel.html

It's based on an svg and it works fine for several thousands of lines (up to 5000), adding more lines (svg path) decreases the performance dramatically (scrolling in the page bees slow)

Keep in mind: That I need to add mouse events (which is handy in svg)

• javascript
• html
• canvas
• svg
• d3.js

• 3 Depends on how the lines are drawn: Is it possible to bine more lines to a single path or polygon element, reducing the number of DOM elements? This might possibly give some performance increase - it's at least worth a try. – Thomas W Commented Dec 20, 2012 at 6:55
• @ThomasW - +1. I've found this helps enormously in improving performance of SVG-based visualizations. In any event, your user can't sensibly perceive tens of thousands of lines. – candu Commented Feb 11, 2014 at 20:36

3 Answers 3

When performance bees a problem, switching to canvas might be an option. In this case you can draw the canvas once. Afterwards it's pretty much treated like an image. Drawing might take some time, but afterwards it can be scaled pretty quickly. Note that it is possible to draw a rendered SVG to a canvas using the context.drawImage method (example). So you could keep your SVG generation code to create an SVG in the background, and then draw it to the canvas.

But keep in mind that it won't scale as beautiful as an SVG as soon as it is on the canvas. When the user zooms in, it will get blurry or pixely, depending on how the browser scales graphics.

Click events on canvas can be handled in two ways. Either keep an array of click targets, and add an onclick event handler to the canvas. When a click occurs, iterate the array and check which one is closest to the click coordinates.

The other option is to use hit regions. These have to be defined as polygonal paths.

Generally svg is better suited for vector images, like in your example. However canvas has a lot of benefits in modern browsers such as hardware acceleration, so for drawing the lines, as long as zooming, panning ect. isn't required performance will be using canvas.

Mouse events can be a pain using canvas, since you have to manually keep track of everything, so with 5000+ points using canvas it wont be fun. The trade off however will be once the points are drawn, assuming you only draw them once the page will behave fine regardless of the number of lines, since they are all drawn to a raster image and aren't part of the DOM.

Honestly though the best way to find it is to test what you currently have using canvas.

+1 to everything said above. I've seen some amazing performance increases when using canvas over SVG and over positing images using the DOM.

About manipulating the canvas image with mouse events, I imagine the best approach for an image such as you are describing is to abstract it away using a library like the following:

• http://paperjs
• http://kineticjs.
• http://www.createjs./#!/EaselJS

Keep your code away from the canvas itself and let a library do the thinking for you.