Search code examples
html5-canvaskineticjsfabricjseaseljs

Best low level canvas library for making interactive animations?

I'm evaluating canvas libraries, and my needs are:

  1. I want to make it easy to build nice looking buttons that move around and on which I can easily capture events. Button drawing helpers would be cool

  2. I'll be building a system for others to use to create animated scenes combining moving test, images, and sound. I won't ever be drawing complex shapes myself, the most I might be drawing is buttons around some text.

  3. I do not want to be totally insulated from the low level machinery of the per-frame drawing callback. Helped along sure, but I'm going to be syncing with Web Audio API stuff and want to keep access to super tight timing control

  4. I'm comfortable with pretty low level scripting of animation, would rather not have it be something that changes Canvas into some totally different paradigm, but not sure on this point

  5. needs to work well for touch on iOs

  6. I'd ideally like to be using one with good docs and a high truck number. The state of Canvas libs reminds me of the state of JS libs 10 years ago, and I'd rather not invest in something that doesn't have an actual "team" behind it. Truck number == 1 worries me.

Solution

  • You flagged KineticJS, so I can say a little bit about how that would work.

    1) It's a great tool for tracking shapes on a canvas, capturing clicks, and moving them around. It's easy to place an image on any shape, but I would use another program to make those images.

    2) Even if you don't do a lot beyond buttons, KineticJS provides some nice features for manipulating the canvas, and I'm sure you'd use a lot of them in making tools for others.

    3) KineticJS provides an animation object that repeatedly calls the draw() method for you. You define your draw method in order to create animations.

    4) It's more of a wrapper around canvas. You work with a Stage and Layers, but there is still a lot of transparency to the canvas itself, and you can always do direct manipulation as well.

    5) You can capture a broad range of events including "touch", "click", etc. It's easy to treat them the same when appropriate or differently if you need to. Furthermore, you can simply mark shapes as "draggable" and it handles all that appropriately.

    6) Kinetic has had spectacular documentation and examples, but in looking now, the tutorials seem to be missing from http://kineticjs.com/ and I can't find them elsewhere. That's minorly worrisome, but the docs are still there and my guess is that they'll be back up soon since KineticJS is still under active development.