Posts Tagged ‘Canvas’

Drawing anything using modern web technologies is possible, however, the default APIs are not that user-friendly.

Two.js is an exciting JavaScript library that provides a 2-dimensional and single drawing API for SVG, Canvas And WebGL.

The library has only (currently) support for shapes (no text or images) and allows importing SVG data.


It can group multiple elements which is useful when transforming them together.

There is a built-in animation loop, methods to draw well-known shapes and lots of options to customize them.

Peity is a jQuery plugin for creating word-sized charts (sparklines) using HTML5 <canvas>.

It has support for bar, line and pie charts where color, width, radius and delimeter can be updated.

Peity jQuery Sparklines Plugin

The plugin adds a "change" event trigger to the graph elements, so, once their data is updated, the charts can be regenerated instantly.

If you would like to add new chart types, Peity can be extended by adding the new charting functions easily.

jCanvaScript is a JavaScript library that comes with methods to controlling HTML5 canvas in a less-complicated way.

The library is completely object-oriented and besides the canvas context, it provides access to mouse/keyboard events, drag 'n' drop and object animation.


Creating new objects is very straightforward with various built-in objects like .circle(), .rect(), .image(), and much more.

Also, there is a huge set of functions that can complete almost any possible action within a single line.

jCanvaScript is very well documented and comes with examples for every feature.

CamanJS is a JavaScript image manipulation library that makes use of HTML5 <canvas> tag.

With a simple-to-use interface, advanced filters including saturation, contrast, gamma, brightness or exposure can be applied.

CamanJS JavaScript Image Manipulation

It has a layer system -similar to the ones in Photoshop or GIMP- that creates so many possibilities.

The library can be extended with new plugins and filters where a detailed "how-to" exists on that subject.

CamanJS is standalone, can be safely used with any other JavaScript libraries and also has a NodeJS-compatible version.

Gury is a JavaScript library which aims to ease the creation of HTML5/Canvas applications by providing a chain based interface.

Using the library, a canvas tag can be created, resized or styled with only few lines of code.

Gury HTML5 Canvas Library

Also, you can add renderable objects, animate and position them anywhere on the page in a single chained expression.

Gury is currently in alpha status, yet it is very promising (as the demos show) and well documented.