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

15+ JavaScript Canvas Libraries Create or Use them image

#10 Fabric.js

Fabricjs Javascript Canvas Libraries 500x277 image

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

eseljs Javascript Canvas Libraries 500x175 image

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
Advertisements

Tutorials of EaselJSeaselJS Js canvas library tutorials 500x391 image

A lot of tutorials are waiting for you

#08 KineticJS

kinecticjs Javascript Canvas Libraries 500x173 image

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 Libraray Javascript Canvas Libraries 500x182 image

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 canvas Javascript Canvas Libraries 500x244 image

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

Download Developer Centre Demos & Examples

#06 Paper.js

paper.js Javascript Canvas Libraries 500x227 image

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

cgSceneGraph 600x277 image

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 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

Advertisements
Advertisement