92

I have been doing research on HTML canvas libraries and I came across this question. What is the current state of the art in HTML canvas JavaScript libraries and frameworks? that was asked in 2010. The top answer was Fabric.js. After doing a bit more research I came across http://www.html5canvastutorials.com/ which features tutorials on KineticJs, that boasts having multiple canvases for speed. A bit more research later revealed that Canvas libraries seem to be all over the place when it comes to speed and features. What is the current state of JavaScript Canvas libraries and frameworks today? Has one come out on top?

EDIT: Since libraries are ever changing and a lot of people have recently been coming here for news and info on new libraries I changed the question to be more timeless.

9
  • 2
    absolutely. I believe the options look like this: 2d-context -> KineticJS, fabric.js, paper.js, or easel.js. 3d-context (webgl) -> Three.js Apr 5, 2012 at 7:36
  • 1
    You can check out kangax's link to the comparsion of canvas libraries. Reposting here docs.google.com/spreadsheet/…
    – ericbowden
    Oct 8, 2012 at 18:48
  • 4
    I'm surprised this question hasn't been closed yet as pretty much everything here generally does get closed. I want to answer but I'm too scared (read "terrified") as it might be considered off topic.Maybe if you reworded the question as "what are similarities/tradeoffs" I could add my two cents (read "answer")
    – puk
    Oct 9, 2012 at 22:40
  • 4
    I feel the same as @puk. Additionally, I think the semantic rift between what are essentially just "open-ended" and what are marked as "not constructive" is amusing. It roughly translates to saying questions for which a single irreducible answer is not possible are not worth consideration in the worlds most popular and comprehensive repository of programming knowledge. I get that they don't fit a good 'Q+A' but why not just mark them as 'highly subjective', cap the rep points and keep them open… something.
    – Mark Fox
    May 7, 2013 at 3:44
  • 1
    Just weighing in for SO that I too am really irritated with the constant closing of helpful questions just because they are subjective. So what!? It's bloody useful stuff. Jun 28, 2014 at 16:35

4 Answers 4

83

Disclaimer: I'm the author of Fabric.js.

I would say that Easel.js, Fabric.js, and Paper.js are among the most used at the moment. I'm judging by the number of Github watchers for each repository, volume of discussion in their Google Groups, and how often I hear about them used as canvas libraries on Twitter.

These are also the ones with more or less decent documentation, examples/demos, discussion groups, and unit tests (the state of testing in most other canvas libraries is pretty sad).

I'm also maintaining this comparison table of various canvas libraries, where you can see how recently the library was updated, its size, support for IE<9 or node.js, and more.

5
  • your comparison gives lot of information but its publicly editable that should be restricted, because some other users will wrongly edit those. I need a help is kineticjs will not support nodjs? and can you give one example like windows paint program(drawing the object circle live with your fabric) Jul 19, 2013 at 13:03
  • it's not publicly editable
    – kangax
    Jul 19, 2013 at 14:32
  • 1
    So lucky that I've found this post! Used to work with Kinetic but it's kinda not mature yet. Then tried Easel, but it's too heavy. Finally moved to Fabric, and it's great!
    – MeLight
    Jul 20, 2013 at 1:58
  • @kangax Sorry for the miss understanding, can you give me one example like windows paint program(drawing the object circle live with your fabric) Jul 22, 2013 at 7:34
  • @Thirumalaimurugan here you go: jsfiddle.net/fabricjs/nXmTC/1
    – kangax
    Jul 22, 2013 at 11:37
67

EDIT: KineticJS is no longer being actively maintained.

Disclaimer: I created KineticJS

KineticJS is actually doing pretty well. You can find the source code at Github, where it is starred by 2180 people at the moment.

It can handle thousands of concurrent shapes:

10,000 drag and drop stress test: http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

10,000 shapes with tooltips: http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/

It has very good event support, including mobile events, and it has a pretty solid suite of 100's of unit tests so the code base feels pretty solid.

kangax: P.S. awesome work with fabric.js! Other than KineticJS (of course), my other two favorite libraries are fabric and paper.

16
  • 7
    Just looked at the demos and performance does look pretty awesome! Also glad to hear you've got unit tests. I see you allow creation of multiple layers. That's nice. In fabric, we optimize the same way but only have 2 layers — one for selection, one for drawing — and internally (users can't create more). Somehow I missed Kinetic when creating libraries comparison chart. We should fix that :)
    – kangax
    Mar 8, 2012 at 12:49
  • 6
    update: KineticJS is now in github: github.com/ericdrowell/KineticJS Apr 5, 2012 at 7:38
  • 7
    How does KineticJS compare with EaselJS ? When should one use what ? May 8, 2012 at 6:25
  • 1
    would like to point out that KineticJS supports SVG vectors as well via the Kinetic.Path() shape html5canvastutorials.com/kineticjs/… Oct 17, 2012 at 0:32
  • 2
    @EricRowell Mate I love KineticJS, its speed, marriage with GSAP, but what is making my head spin is there a way to freely transform KineticJS objects like the way in FabricJS? Here is the link reference to what I am trying to say: fabricjs.com/customization I don't want to use FabricJs as its really slow, and its low performance evident from various unit tests. I am really looking forward to finding a way to be able to freely transform object in KineticJS as it would make life so much easier. Thanks, Praney
    – praneybehl
    Sep 13, 2013 at 2:48
62

For recent readers, as of Jan 2013, I evaluated:

  • Kinetic
  • Fabric
  • Paper
  • Easel

By "evaluated", I did more than just read the docs; I created a prototype app.

I started with Fabric because it seemed to have the largest community and thought that it would be my solution. But, I gave up on Fabric for the following reasons:

  • weird and undocumented API inconsistencies that burned a lot of my time unnecessarily.
  • inconsistent pointer event support. Specifically, Fabric does not consider a "Path" to be a true shape object that is selectable and observable. This did not meet my needs since interactive Paths are a major requirement of my app.
  • behind the scenes additions of translations to the Canvas to position objects. For me, Fabric tries to be too clever in this regard without being clear to the developer what it's doing.
  • overly strong opinion on how move, resize and rotate interactivity works. In many ways, it's great to have this functionality built into the framework but, in my case, I didn't agree with the way it was implemented which meant essentially having to reimplement it myself anyway.
  • sparse documentation - lot's of those cases where the documentation of a method is of the form: "setX(Y) - set's the X to Y" :-)

I took a look at Paper and didn't get too far. It seemed overly obtuse to me and also falls between too stools IMO - it's too much of a visualization library to be a simple object model for Canvas but it's not enough of a visualization library to compete with D3. Plus, the documentation again was not particularly accessible.

I think Easel probably makes a lot of sense if you have a Flash/ActionScript background but I do not. Plus, it seemed overly game-focused for my requirements. The nail in the coffin was again documentation - not enough and presented in non-standard format.

So, I ended up going with Kinetic because:

  • really rich and clear tutorials and examples
  • API functions do what they're called and are largely guessable - faster productivity, shallower learning curve
  • is reasonably clear about what it does do and what it doesn't - it's not as rich as some of the others but that's a benefit; it does fewer things but does them better
  • Paths are first-class citizen Shapes, like any other Shape, which was essential for my requirements.

Kinetic is not perfect by any means and there have been a few times when I've had to dive deep into the source code to work out what's actually going on under the covers. Plus, I miss the SVG parsing and output of Fabric.

4
  • 1
    Thanks for this answer, saved me a lot of time. I'm going to go with Kinetic, and hope you discover what you already said.
    – Bashevis
    Feb 5, 2013 at 5:55
  • I have done a non-scientific user test of the provided drag-and-drop demos for the libraries above on iPad3 and Samsung Galaxy Tab2. KineticJS came out as a clear winner also here, being more responsive and more exact in its touch positioning. Apr 27, 2013 at 18:37
  • 1
    I am evaluating both, and for the moment sincerely fabricjs seems to be more complete and well documented.
    – albanx
    Jul 9, 2013 at 6:58
  • 9
    Jeremy, I'd love to hear more about API inconsistencies in Fabric. I try to make it as intuitive as possible so if something is still weird, I'd definitely want to take care of it. Can you file a ticket or mention it here? The docs have been improving since January, although still not as good as I'd like them to be. Strong opinion of interactivity — I guess you can say that, although there's quite a lot of tweaking you can do. What exactly you wanted different? Finally, pointer events — not sure what you mean. Path is certainly a real shape: fabricjs.com/quadratic-curve
    – kangax
    Aug 5, 2013 at 17:30
23

I would highly recommend pixijs. Its a high performance canvas library.

Pixi.js is a 2D webGL renderer with a seamless canvas fallback that enables it to work across all modern browsers both desktop and mobile.

http://www.goodboydigital.com/pixi-js-is-out/

1
  • 3
    As of July 2014, this seems like the best canvas library out there. With 4k people starred it on Github and it is used by big companies and agencies. pixijs.com/projects like Google.
    – Vennsoh
    Jul 14, 2014 at 4:05

Not the answer you're looking for? Browse other questions tagged or ask your own question.