ChatGPT解决这个技术问题 Extra ChatGPT

Current State of Javascript Canvas Libraries? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 9 years ago. Improve this question

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.

absolutely. I believe the options look like this: 2d-context -> KineticJS, fabric.js, paper.js, or easel.js. 3d-context (webgl) -> Three.js
You can check out kangax's link to the comparsion of canvas libraries. Reposting here docs.google.com/spreadsheet/…
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")
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.
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.

k
kangax

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.


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)
it's not publicly editable
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!
@kangax Sorry for the miss understanding, can you give me one example like windows paint program(drawing the object circle live with your fabric)
@Thirumalaimurugan here you go: jsfiddle.net/fabricjs/nXmTC/1
w
whitneyland

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.


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 :)
update: KineticJS is now in github: github.com/ericdrowell/KineticJS
How does KineticJS compare with EaselJS ? When should one use what ?
would like to point out that KineticJS supports SVG vectors as well via the Kinetic.Path() shape html5canvastutorials.com/kineticjs/…
@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
J
Jeremy Burton

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.


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.
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.
I am evaluating both, and for the moment sincerely fabricjs seems to be more complete and well documented.
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
b
bendangelo

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/


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.