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).

Answer 1

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.