Re:New Chart.js beta version launched
by nnnnnick on Sunday June 29, 2014 @06:07PM
(#7962657)
SVG is a good solution too, but it can really suffer performance-wise, especially on mobile, tablet and when animating svg node positions.
[ Parent
| on HN ]
Canvas is bitmap-based, while SVG is vector. If you need to print the chart SVG is going to look a lot better. Also, if you pinch-zoom the chart, SVG is going to look better. Canvas doesn't support animation -- you have to code it yourself. SVG performance is quite good unless you have thousands of elements, which a chart isn't going to have.
> Canvas doesn't support animation -- you have to code it yourself.
What do you mean?
The obvious. That canvas is just a set of pixels with colors (a bitmap image). To get animation, you have to explicitly change them every X milliseconds.
Whereas SVG has actual objects, that you can apply items like animateTransform, animateMotion etc to them directly, in a declarative style.
Ok, thanks. I didn't know that. I thought you had to clear/redraw the SVG for animation as well.
Re:New Chart.js beta version launched
by bicknergseng on Sunday June 29, 2014 @06:32PM
(#7962739)
Have you done any benchmarking of canvas vs svg charts?
I did a while back for my university dissertation, I'll have to see if I can dig it out.
IIRC: canvas tends to outperform svg when dealing with a lot of individual objects, due to them being individual dom nodes in svg. However svg will outperform canvas drawing fewer nodes, on a larger canvas, due to canvas being bitmap based.