Paper.js VS EaselJS VS Fabric.js vs KineticJS

Question

• paper.js
• EaselJS
• fabric.js
• KineticJS

Hello guys I am new in html5 canvas development and I am lost in choosing canvas frameworks. There are so many of them that I can't find out what to use. So here I am! I want your help to choose which one is better for my needs. There are my needs

1) I want the framework used Vector graphics, I know canvas is not DOM, I realy don't care about it but what I mean is I want to manipulate with objects after its creation, PaperJS has this feature I don't know about others. If advanced mouse events will be available it would be better.

2) I want to use the framework for images, I will load image and animate them with canvas, move, animate some colors...

3) I want the framework to be fast because of my needs (image animation should be smooth)

4) I want the framework to have good community because I know I will need some help.

So what do you think which one is better for me? and please if you can write down from my list which are the strength and weakness for each framework?

Answer 1

HTML5 canvas is still very fresh environment. You can get impression there is a lot of tools already available, they are often quite immature though.

My answer will cover only part of your question because I used only KineticJS and EaselJS. You can start from reading opinions at this page (mine is the last one at the bottom).

Speaking shortly KineticJS has lower entry barrier. It's simple drawing library and has some support for mouse events too. At the time I was trying to use it it was barely extendable. I found it really hard to customize for my needs. EaselJS is a bit harder to start with, but it's more advanced too. Now it's part of other libs set known all together as CreateJS. It seems that lot of development going around there.

1. Both Kinetic and Easel supports mouse event. I don't remember well the Kinetic, sensing 'onMouseOver' is costy with Easel though. Also both mentioned libs allows objects manipulation. You can find here TweenJS also useful as addition.
2. Again both Kinetic and Easel allows this. Easel also has support for sprites - 'animated images' well known for web game developers.
3. I'm not sure about Kinetic as I haven't reached animation part of my project before I dropped it (the lib, not the project). With Easel speed is tricky. It has some optimization methods implemented like for example objects cache or snapToPixel flag. Examples seems to run really well. However for my project using Easel smoothness still is an issue despite quite a lot of effort put in optimization. Maybe I misused the API or there is still place for more optimalization I haven't noticed.
4. Both libs are quite young but seems to be actively developed. Authors are rather responsive. Community still isn't big, but I guess CreateJS as more complete set of tools for creating games will grow faster.

If you want to check here is the project I mentioned. It's a web page made with usage of EaselJS + TweenJS. Still needs some minor tweaking though.