10 jQuery Drawing Plugins

Sam Deering
Tweet
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.
Drawing-using-JavaScript-and-jQuery.jpg
Source


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.
Using-jQuery-and-LiquidCanvas-to-Add-Drop-Shadows.jpg
Source


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.
jQuery-Visualize-Plugin-Accessible-Charts-and-Graphs-from-Table-Elements-using-HTML-5-Canvas.jpg
Source


4. jQuery SVG Plugin


A jQuery plugin that lets you interact with an SVG canvas.
jQuery-SVG-Plugin.jpg
Source


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.
Library-for-simple-drawing-with-jQuery.jpg
Source


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.
Draw-–-jQuery-Drawing-Plugin.jpg
Source


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.
jQuery-Ink.jpg
Source


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.
Scratch-Pad.jpg
Source


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.
Jelliphy.jpg
Source


10. Arrows and Boxes


Easy to use but powerful plugin to draw nice boxes and arrows to your website from simple markup like.
Arrows-and-Boxes.jpg
Source

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.