91

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.

Community
  • 1
  • 1
ericbowden
  • 2,177
  • 1
  • 19
  • 21
  • This post should be updated, it seems to me now that KineticJS and EaselJS are the most popular. I like kineticJS a lot but EaselJS(CreateJS suite) seems to have more features. A comparation between these two libs would be nice. – olanod Oct 08 '12 at 17:38
  • 1
    You can check out kangax's link to the comparsion of canvas libraries. Reposting here https://docs.google.com/spreadsheet/ccc?key=0Aqj_mVmuz3Y8dHNhUVFDYlRaaXlyX0xYSTVnalV5ZlE#gid=0 – ericbowden Oct 08 '12 at 18:48
  • @DannYO I worked with EaselJS for about a year before giving up on it due to performance issues and some poor design choices. Recently I went over the KinectJS tutorials and it appears much cleaner. – puk Oct 09 '12 at 22:19
  • 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 09 '12 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 07 '13 at 03:44
  • What about three.js? I would think being able to export to SVG would be a required feature for IE7-8 support. Which of the above libraries support this? – Bachalo Mar 09 '12 at 22:21
  • 2
    absolutely. I believe the options look like this: 2d-context -> KineticJS, fabric.js, paper.js, or easel.js. 3d-context (webgl) -> Three.js – Eric Rowell Apr 05 '12 at 07:36
  • 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. – Iain Duncan Jun 28 '14 at 16:35
  • Comparison chart with several not mentioned here: http://html5gameengine.com/ – Grault Jul 04 '14 at 20:55

4 Answers4

82

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.

kangax
  • 38,898
  • 13
  • 99
  • 135
  • 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) – Thirumalai murugan Jul 19 '13 at 13:03
  • it's not publicly editable – kangax Jul 19 '13 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 '13 at 01: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) – Thirumalai murugan Jul 22 '13 at 07:34
  • @Thirumalaimurugan here you go: http://jsfiddle.net/fabricjs/nXmTC/1/ – kangax Jul 22 '13 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.

whitneyland
  • 10,632
  • 9
  • 60
  • 68
Eric Rowell
  • 5,191
  • 23
  • 22
  • 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 08 '12 at 12:49
  • 6
    update: KineticJS is now in github: https://github.com/ericdrowell/KineticJS – Eric Rowell Apr 05 '12 at 07:38
  • I use Kineticjs. Pretty good ! – geeky_monster May 08 '12 at 06:23
  • 7
    How does KineticJS compare with EaselJS ? When should one use what ? – geeky_monster May 08 '12 at 06:25
  • I did some research on Javascript canvas libraries and I think I will choose Kineticsjs because of the nice documentation. Also, it seems to be very easy to use. Thanks for your good work. – Pith Sep 29 '12 at 13:05
  • I've also been reading up on all of these libraries (processing.js, d3.js, paper.js, raphael.js, kinetic.js, easel.js, fabric.js)... I totally agree that fabric.js looks pretty awesome for handling vector graphics (I REALLY love the SVG import/export possibilities!), and I'm feeling like kinetic.js is probably the best option for raster graphics... any thoughts on what might happen if I tried to use both at the same time? – accidental_PhD Oct 02 '12 at 16:53
  • 1
    would like to point out that KineticJS supports SVG vectors as well via the Kinetic.Path() shape http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-path-tutorial/ – Eric Rowell Oct 17 '12 at 00:32
  • About KineticJS: Good point: the home page looks good. :-) Bad point: neither there, nor on the GitHub page I can see the license of the library. I mean, prominently. Perhaps it is there, but "hidden" in a sub-page. I only see the Support License... – PhiLho Nov 27 '12 at 13:27
  • @PhiLho kinetic is MIT & GPL2 as you can see from here — https://docs.google.com/spreadsheet/ccc?key=0Aqj_mVmuz3Y8dHNhUVFDYlRaaXlyX0xYSTVnalV5ZlE#gid=0 – kangax Nov 27 '12 at 15:05
  • just look at the JavaScript file. Most open source libraries, including KineticJS, have the license there. – Eric Rowell Nov 28 '12 at 06:25
  • @EricRowell KineticJS will support to nodejs or not? its mentioned as it will not support nodjs in kangax [comparision link](https://docs.google.com/spreadsheet/ccc?key=0Aqj_mVmuz3Y8dHNhUVFDYlRaaXlyX0xYSTVnalV5ZlE) – Thirumalai murugan Jul 19 '13 at 12:27
  • 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: http://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 '13 at 02:48
  • 1
    Is freehand drawing like fabric supports it ( fabricjs.com/freedrawing ) possible in KinectJs? Does it also support touch devices? – Martin Thoma Apr 03 '14 at 16:28
  • Although KineticJS doesn't have a built in API for freehand drawing, it's pretty straightforward to achieve that effect - just continually add points to a line as you move the mouse around. The key methods of interest would be stage.on('contentMousemove contentTouchmove',...) and line.setPoints(...). 2) Yes, KineticJS supports touch devices as well – Eric Rowell Apr 04 '14 at 17:04
  • 1
    For anyone coming across this in a Google search, it looks like KineticJS is no longer being developed or maintained. – samkass Jan 03 '15 at 04:36
  • @samkass I had no idea... Sad to hear this (healthy competition is good) and we welcome anyone to try Fabric, which is maintained, growing, and has a lot of cool things planned for 2015. – kangax Jan 05 '15 at 12:21
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.

Jeremy Burton
  • 873
  • 6
  • 10
  • 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 05 '13 at 05: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. – Per Quested Aronsson Apr 27 '13 at 18:37
  • 1
    I am evaluating both, and for the moment sincerely fabricjs seems to be more complete and well documented. – albanx Jul 09 '13 at 06: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: http://fabricjs.com/quadratic-curve/ – kangax Aug 05 '13 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/

bendangelo
  • 438
  • 5
  • 8
  • 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. http://www.pixijs.com/projects/ like Google. – Vennsoh Jul 14 '14 at 04:05