Kineticjs vs Raphaeljs

Question

I'm starting a new project using HTML5. Two of the most popular graphical toolkits are KineticJS and RaphaelJS. If you have experience of using these, do you have any advice? Which features do they offer, and is there an advantage in using one over the other?

E.g. only RaphaelJS works on legacy browsers (but this in not a feature I require).

You've got to be more specific about what kind of project you are doing, different techniques suits different needs. — bennedich, Jan 26 '12 at 09:43
@bennedich I just need to know what are differences in possibilities of both of them — Artur Keyan, Jan 26 '12 at 11:25
Note that the author of RaphaelJS has also created SnapSVG: http://snapsvg.io/ which is better suited for modern browsers. — Erel Segal-Halevi, Dec 24 '13 at 09:24

score 52 · Accepted Answer · edited May 23 '17 at 11:45

52

The biggest difference between RaphaelJS and KineticJS is that RaphaelJS uses SVG and KineticJS uses HTML5 Canvas for visualization.
So it really depends on what kind of project you are doing.

Here are some useful links which you should check out regarding SVG vs Canvas:

Thoughts on when to use Canvas and SVG (also describes a hybrid approach)
Simon Sarris excellent reply in this stackoverflow thread (I also posted some benchmarks between SVG and canvas in the same thread)

To summarize:

If you want to create some interactive charts I would go with RaphaelJS because it's easier to do that with SVG (KineticJS does provide some abstract API which should make it fairly easy to do that too).
If you want to visualize huge numbers of shapes/objects I would recommend to use KineticJS as canvas scales usually better with huge numbers of shapes/objects to be drawn and KineticJS uses multiple layers to improve rendering performance.

edited May 23 '17 at 11:45

Community

1
1

answered Jan 26 '12 at 16:40

Ümit

17,379
7
55
74

3

I disagree about SVG working better for charts than canvas, actually. Take a look at this demo: http://meteorcharts.com/ Canvas can handle hundreds of thousands of data points, and remain responsive, even on mobile devices. SVG just simply cannot do that. – Eric Rowell Jun 01 '13 at 08:25
1

Sure, if you have to deal with a huge amounts of shapes/points to be drawn, than Canvas scales better than SVG (see the benchmarks in the threads). But for simple interactive charts (barcharts, piecharts, etc) SVG is fast enough and if you use [D3.js](http://d3js.org/) you can create some really impressive interactive charts with relatively little effort. – Ümit Jun 03 '13 at 06:54
SVG or Canvas? Сhoosing between the two. http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/ – Cherven Jun 10 '13 at 17:28
This is also an interesting presentation about 'Graphics on the Web', covering several frameworks (including KineticJS and RaphaelJS). Actually the presentation is done by the creator of KineticJS. https://www.youtube.com/watch?v=ZS6QqNJ0VRA – Sjiep Apr 17 '14 at 00:16
@Ümit - Whats recommended for interactive visualization, e.g. if I want to drag points on a chart of few hundred datapoints? and attach event with those points, which library you would suggest? – Mutant Jun 20 '14 at 22:01

Kineticjs vs Raphaeljs

1 Answers1