Connect With WRD
feed via e-mail
feed via e-mail

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.

AwesomeChartJS is an open source JavaScript library for creating charts using the HTML5 <canvas> tag.

The library is standalone (doesn't require any JS frameworks) and works very straightforward with an easy-to-use function.


It supports multiple chart types:

  • vertical and horizontal bar charts
  • pareto bar charts
  • pie charts (whole or part)
  • exploded pie charts
  • ring/doughnut charts

It focuses on simplicity and doesn't offer too much for customization other than the title, chart type and labels. Yet, simplicity is sometimes all we ask for.

nude.js is a JavaScript library that uses HTML canvas for detecting if an image contains nudity or not.

As the algorithm runs on the client-side, it is optionally possible to display the image with user interaction.


The library can be very useful for web applications where users can share images, it can be activated for users under a specific age, etc.

nude.js is still under development for making the algorithm better, however it is already very promising.

canvasXpress is a free JavaScript graphing library based on the <canvas> tag of HTML5.

It supports multiple graph types including bar, line, dotplots, area, stacked, heatmaps, pie charts and more.


The outputs are interactive as hovering over the items can display values.

And, it is possible to customize every aspect of them including colors, text, hiding/showing elements, etc.

canvasXpress works in all major browsers including IE6.

Gradually is a simple MooTools image slider that can present the images in an order and display an informative text for each (which is sometimes all we need).

It makes use of the HTML5 canvas element to create a beautiful transition effect.

The slider simply requires an unordered list of images (hopefully, with the same size) and uses the alt tag value as the informative text.

MooTools HTML5 Image Slider

Besides the width/height values, the duration and interval when image is switched can be set too.

P.S. The download link at the website currently has a typo (here is the working one).

RGraph is a free graph library that uses the HTML5 canvas tag.

Using the library, it is possible to create a wide variety of graph types:

  • bar, pie, donut, gantt, radar, funnel, bi-polar charts
  • line and scatter graphs
  • LED display
  • meter
  • odometer
  • progress bar

RGraph HTML5 Chart

The charts are interactive (respond to mouse-overs and clicks) and, optionally, they can load with animations or zoom to a specific point.

There is also an annotation feature where you can draw over the graphs for highlighting them.

P.S. RGraph is only free for personal use.

Uptime Robot