10 jQuery Drawing Plugins

By Sam Deering
10 jQuery Drawing Plugins to help you, well, draw stuff such graphs, boxes, arrows, scribble pads, draw lines, circles and other shapes! Some of then utilise HTML canvas element so make sure you check those ones out! jQuery, the write less do more code, now lets you to write less and draw more. These plugins and tutorials provide you with an insight on how jQuery can be used for drawing lines and a wide array of shapes.

1. Drawing using JavaScript and jQuery

Drawing functionality is not supported in most of popular browsers except Firefox and Safari with Canvas object. Using little trick we can draw line and circle using JavaScript. This is not best practice because need lot of execution time but it can be alternative way to draw simple and little objects.

2. Using jQuery and LiquidCanvas to Add Drop Shadows

I designed a new CSS-based layout for the page, and instead of trying to modify all of the existing drop shadow and border graphics to fit, I decided to use jQuery and the LiquidCanvas plugin to keep the page size small while retaining all of the visual effects.

3. jQuery Visualize Plugin-Accessible Charts and Graphs from Table Elements using HTML 5 Canvas

The jQuery Visualize plugin provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of way.

4. jQuery SVG Plugin

A jQuery plugin that lets you interact with an SVG canvas.

5. Library for simple drawing with jQuery

This Library for simple drawing with jQuery applies SVG (using Keith Wood plugin for jQuery) or canvas method if supported on the client browser (includes explorercanvas patch for ie). If not, applies methods derivate from the work of Walter Zorn for compatibility.

6. Draw – jQuery Drawing Plugin

This plugin was created after noticing Walter Zorns JavaScript for drawing shapes on screen with divs.I have also looked into the drawlibrary plugin, but it has a little too much overhead. Drawlibrary does use the same algorithms as Walter Zorns work as well, but relies on SVG files when using Microsoft I.E. This plugin does not.

7. jQuery Ink

The jQueryInk plugin is a widget for the jQuery UI library that provides a functionality of a canvas to be used for writing. It utilizes a HTML5 canvas and provides a functionality of writing strokes on it, erasing previously written strokes, selecting groups of strokes or clearing the whole canvas.

8. Scratch Pad

Scratch Pad is a simple plug-in that uses the HTML 5 canvas to create an interactive drawing surface with just a few lines of code.

9. Jelliphy

Introduces a new concept in web design: a browser-based GUI to modify any web page from the browser itself. Currently tested with the last versions of Chrome, Firefox, Opera, Safari, Internet Explorer 8 and 9.

10. Arrows and Boxes

Easy to use but powerful plugin to draw nice boxes and arrows to your website from simple markup like.



Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

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