10 Cool JavaScript Drawing and Canvas Libraries

By Sam Deering

JavaScript/web designers and developers and can take advantage of these JavaScript Drawing and Canvas libraries to add graphics drawing functionality to their web applications or websites. Have fun!

Update 18/05/2013: Added 11. Canvas Query.

1. oCanvas

Is a JavaScript library 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.



2. Drawing lines in Mozilla based browsers and the Internet Explorer

HTML itself is not able to describe lines. Therefore, there is no built-in feature in the above-mentioned browsers for drawing lines. By implementing the Bresenham algorithm with JavaScript while applying some tricks, we will be able to draw lines in a good manner in respect to the browser runtime and memory footprints.

Drawing lines in Mozilla

Source + Demo

3. canviz JavaScript library

Using Canviz has advantages for your web application over generating and sending bitmapped images and image maps to the browser as the server only needs to have Graphviz generate xdot text; this is faster than generating bitmapped images.

canviz JavaScript library


4. Flotr JavaScript Plotting Library

Flotr enables you to draw appealing graphs in most modern browsers with an easy to learn syntax. It comes with great features like legend support, negative value support, mouse tracking, selection support, zoom support, event hooks, CSS styling support and much more.



5. Raphael: JavaScript Drawing Library

Raphael uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.



6. PlotKit – Javascript Chart Plotting

PlotKit is fully documented and there is a quick tutorial to get you started. PlotKit is a complete rewrite of CanvasGraph. It is better structured and supported.



7. CanvasGraph.js : Graphing in Javascript

The motivation for this work is to allow simple graph plotting in JavaScript without resorting to anything but your web browser.



8. jsDraw2D : 2D Graphics Library for JavaScript

With jsDraw2D, you can draw advance drawings like cubic Bezier curve, general Bezier curve. The general Bezier curve can be of any degrees including linear, quadratic and cubic, open curve passing through given points and closed curve passing through given points.



9. JavaScript Vector-Draw Library

The library is cross-browser and fast. However, due to the limitations of HTML, drawing on your web pages using JavaScript is slower compared to drawing in stand-alone applications.

JavaScript Vector-Draw Library

Source + Demo

10. Draw2D JavaScript Drawing Library

Create drawings and diagrams with the free JavaScript library. The User interface allows interactive drawing by using your standard browser. No additional software and no third party plug ins. Just run it and use it.



11. Canvas Query
use HTML5 Canvas like jQuery
extended canvas for gamedevelopers
easy setup for a game loop, rendering loop, mouse, touch and keyboard



Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.