What is the current state of the art in HTML canvas JavaScript libraries and frameworks? [closed]
I've been working on fabric.js — a canvas library to help with exactly that — manipulating objects on canvas, by handling events and user interactions. It's not released yet, but take a look at a simple preview demo.
You can also see it in action in this design editor, which it was originally created for.
Edit: The project is now available on github (open-sourced under MIT License)
To get started, check out:
- Demos (simple & complex, with code to show how they're done)
- Fabric.js presentation at FalsyValues (and another one at BK.js)
- Wiki on github (including FAQ)
- Documentation
- Google Group (ask any question there)
- Fabric.js on twitter (or short questions via twitter)
- Introduction to Fabric.js: Part 1 (article on ScriptJunkie)
- Introduction to Fabric.js: Part 2 (article on ScriptJunkie)
How does Fabric compare to other Javascript canvas libraries? Here's a comparison table.
I'm surprised no one has mentioned WebGL, and frameworks built on it. I would consider it high on the list for state-of-the-art for 3D GPU-accelerated graphics and complex animation on HTML canvas / javascript.
WebGL is a cross-platform,royalty-free web standard for alow-level 3D graphics API based onOpenGL ES 2.0, exposed through theHTML5 Canvas element as DocumentObject Model interfaces. ...
WebGLbrings plugin-free 3D to the web,implemented right into the browser.Major browser vendors Apple (Safari),Google (Chrome), Mozilla (Firefox),and Opera (Opera) are members of theWebGL Working Group.
WebGL is very solid in its support for GPU-accelerated graphics. Check out these GLSL shader demos. :-) And see ChemDoodle as an example of user interaction.
I've been working on an app using Google's O3D framework, which manages the scene graph, and uses WebGL for rendering (it used to use its own plug-in). O3D is a work in progress, and its documentation is not completely up to date, but it is under active development, and there are some good demos out there. 3D Pool may be most up your alley. The Google developers are very responsive to questions in the discussion group.
There are a number of other frameworks built on WebGL; see here. Ones that mention game development and scene graphs include Copperlicht, SceneJS, X3DOM.
WebGL runs in recent development builds of several browsers, but not IE. I've been using Firefox ("Minefield") and Chromium with good results. You will need one of these to run the above demos.
However if your requirements are that it must have no dependencies beyond HTML 5 canvas / js, WebGL may not be the right choice. It doesn't look like IE will support it anytime soon.
Update: after putting up a lot of resistance, MS decided to support WebGL in IE 11.
three.js, by mr. doob, is a fantastic 3d engine for javascript that includes scenegraph (both software and WebGL/hardware accelerated versions), shading, particles, skinned animation (i think), and lighting effects. Check it out, he is a super-talented fellow.
I should add that you are going to need the newest Google Chrome or equivalent to view most of the demos, one of my favorites is: http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html