15 HTML5 Canvas Javascript Libraries

The canvas element is a HTML feature and is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is an easy and powerful way to draw graphics. Here are 15 HTML5 Canvas Javascript Libraries that make it much easier to work with canvas.



Processing.js

It is the sister project of the popular Processing visual programming language, designed for the web. Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. You write code using the Processing language, include it in your web page, and Processing.js does the rest. It’s not magic, but almost.

processingjs-14

Fabric.js

Fabric provides interactive object model on top of canvas element. Fabric also has SVG-to-canvas (and canvas-to-SVG) parser.

Fabric-2

oCanvas

It`s intended to make development with HTML5 Canvas easier. Instead of working with pixels, you work with objects. It’s very straightforward and easy to get started with. Please have a look at the examples to see just how easy it is.

ocanvas-13

jCanvas

Written using jQuery and for jQuery, that wraps around the HTML5 canvas API, adding new features and capabilities, many of which are customizable. Capabilities include layers, events, drag-and-drop, animation, and much more.

jcanvas-1

Phoria

This for simple 3D graphics on a canvas 2D renderer. It does not use WebGL – so works on any device that can display HTML5 Canvas – so all modern browsers and including iOS and Android phones! It uses the excellent vector and matrix maths library gl-matrix.js.

Phoria-2

rgraph

It`s built for web charts and supports over twenty different types of visualisation. Using the canvas tag, RGraph creates these charts inside the web browser using JavaScript, meaning quicker pages and less web server load. This leads to smaller page sizes, lower costs and faster websites.

rgraph-3

Two.js

Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.

Twojs-4

Paper.Js

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.

Paperjs-5

EaselJS

EaselJS provides straight forward solutions for working with rich graphics and interactivity with HTML5 Canvas. It provides an API that is familiar to Flash developers, but embraces Javascript sensibilities. It consists of a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.

easeljs-7

KineticJS

KineticJS is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.

kineticjs-6

CAKE

CAKE is a JavaScript scene graph library for the HTML5 canvas tag. You could think of it as SVG sans the XML and not be too far off.

cake-8

Pixi

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

pixe-10

SigmaJS

Sigma is a JavaScript library dedicated to graph drawing. It makes easy to publish networks on Web pages, and allows developers to integrate network exploration in rich Web applications.

sigmajs-9

jCanvaScript

jCanvaScript is a javascript library that provides you methods to manage with the content of a HTML5 canvas element easily. It runs on any platform (including iPhone, iPad, Android) that supports canvas and JavaScript. To add support for canvas in Internet Explorer you can use ExCanvas.

cscript-11

PhysicsJS

A modular, extendable, and easy-to-use physics engine for javascript.

physics-12

enchant.js

enchant.js is a framework for developing simple games and applications in HTML5 + JavaScript.

enchantjs-15

0 Comments

  1. Great post. I have used Processing.js, two.js, paper.js and I know a lot of people use kinetic as well. Pixi.js is awesome and they are really pushing the threshold of what can be done with in browser animation but it is very advanced compared to the other four I mentioned. More of a rendering engine of sorts.

    • Hichem CHTARAsays:

      Hello, I want to develop a graph drawing app with nodes, edges, pan & zoom, edit (drag & drop) static (no animation). Which library do you recommand ?

  2. Yan Yuesays:

    Thank you for your article. I’ve used VanCharts for some time. How about you think of it?

  3. Anton Baranchuksays:

    take a look at http://www.anychart.com

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.