Create JavaScript libraries on your own or use the JavaScript Canvas Libraries listed below, to make your websites more and more interactive. Introduce graphics tools, enjoy new era drawing tools. Scratch away some beautiful graphs, and never hesitate to mention which JavaScript Library you used.
JavaScript Canvas Libraries
#10 Fabric.js
Fabric.js provides you with a canvas object creation API, you can do the below things with it
- Making shapes like— rectangles, circles, ellipses, polygons whereas making complex shapes is not an issue
- Deal with objects like scale, move, and rotate with your mouse
- Change the CSS properties like— color, transparency, z-index, etc
- You can group things by using mouse manipulation
- Text on canvas – Can be added, Can change its size, alignment, font family and other CSS properties.
- Apply Filters to images – eg removing the background, or adding grayscale effect
- Serialize the entire canvas into a JSON string
- It can act as SVG to Canvas and Canvas to SVG Parser
Check out demos Read introduction Download latest version (Github)
#09 ESELJS
EaselJS makes working with rich interactive graphics easier especially with HTML5 Canvas. It has a lot of features and a lot f demos as well. You get all the demos by downloading EaselJS canvas library. More features are listed below
- API similar to Flash but works with Js Sense
- HTML5 Canvas with Rich Graphics interaction
- It has hierarchical display list, with that a core interaction model, and finally a helper classes to make working with Js on Canvas much easier
- Supports Object nesting
- Canvas object display
- Mouse interative Model
[ad]
Tutorials of EaselJS
A lot of tutorials are waiting for you
#08 KineticJS
KineticJS is a Js Framework that enables you to have high performance
- Animations
- Transitions
- Node nesting
- Layering
- Filtering
- Caching
- Event handling for desktop and mobile applications plus a lot more
#07 HTML Canvas Javascript Library
HTML canvas library is a great light weight library with html canvas elements written in Javascript
Features
- It has Full wrapper of the canvas element
- Simple and easy to learn/implement
- Built-in support for animations with framerate control
- Cross-browser keyboard, mouse and multitouch event capture is possible
- Layers support is avaialbe for high-performance animations
- Aligning support: Nine-point
- Simple rotations are possible
- Built-in image loading API
- Real time edittor with a lot of Demo examples
- Example interfacing the Box2D-JS physics library
- No dependencies on third party libraries such as jQuery
About Examples Demos Documentation
#06 bHive Canvas
bHive allows you to create rich
- User experiences
- Animations
- Games and Applications
- HTML 5 canvas framework API
- Basically all you need for drawing animation and interaction
#06 Paper.js
Paper.js helps you to make ultimate vector graphics on the top of you HTML5 Canvas
- Vector Graphics scripting framework over HTML5 Canvas
- Scene Graph / Document Object Model
- Powerful functionality to make and work with vector graphics & curves
- Handling drawing items and making your own shapes
- Well designed programming interface
- Provides best breeds of Vector Maths
- PaperScript, a simple extension of JavaScript allows the scoped execution of scripts without polluting the global scope
- Mouse and keyboard interactions of next age & level
- Box any element, paper.js knows no limits
- Simulate dashes strokes that are not present
- Most blend modes known from Illustrator and Photoshop supported through emulation in JavaScript: multiply, screen, overlay, soft-light, hard-light, color-dodge, color-burn, darken, lighten, difference, exclusion, hue, saturation, luminosity, color, add, subtract, average & negation.
#05 cgSceneGraph
– oriented object and very well commented
– full animation engine
– collision detection
– animated sprite
– a lot of events
– object manipulation (multi selection, resize, drag etc
– provided with a lot a extension (particle engine, image, text, tab bar, button, animated sprite etc
Want more?
Here are some more libraries that I found useful
[ad]
- Artisan.js
- BitmapData.js
- CanvasContext2DWrapper
- canto.js
- Mootools Canvas Library
- canvas_library
- drawlib2dv
- NeonCanvas
- libCanvas
- Layered Canvas Library
6 replies on “15+ JavaScript Canvas Libraries”
As a simple javascript library, we have jquery which is very powerful. But I want to know which are some of the powerful canvas library in terms of usability, flexibility and versatility.
I found Raphael to be pretty interesting, but I found it has very less effects. So I am looking for a canvas library with has a lot animation effects and flexibility working with SVG and canvas elements.
There is one more library Flash.js that can be used to create flash games . This was build to be used instead of flash. So it is very compatible. I love the way you are writing your posts. Keep it up.
Thanks for liking the content I write. I will consider reviewing the mentioned one.
I love Paper.js
Hi,
thank you for your list.
You can also add cgSceneGraph (I’m the designer of the framework).
It’s a very powerful and extensible javascript canvas framework:
– oriented object and very well commented
– full animation engine
– collision detection
– animated sprite
– a lot of events
– object manipulation (multi selection, resize, drag, …, …)
– provided with a lot a extension (particle engine, image, text, tab bar, button, animated sprite, …, …)
– …
I’ll be glad if you can try it or the examples and tell me what you think about it.
Cheers. Gwennael.
Your request entertained library added to the post. Good one.