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

Accessible data visualization in HTML has always been tricky to achieve, particularly because elements such as images allow only the most basic features for providing textual information to non-visual users. A while back, we wrote an article describing a technique we came up with to use JavaScript to scrape data from an HTML table and generate charts using the HTML 5 Canvas element. The jQuery Visualize plugin provides a simple method for generating bar, line, area, and pie charts from an HTML t

2. 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. Basically this trick is drawing many DIV elements with 1×1 pixel size inside the document. Basically we can t draw 1×1 pixel size DIV elements in IE. To resolve this issue, you can add IMG element

3. Drawing Lines With jQuery – Video Tutorial

A video tutorial that explains how to draw lines with jQuery.

4. Using jQuery and LiquidCanvas to Add Drop Shadows

Recently, I was working on a website redesign project for a client. They wanted to keep some of their product catalog, shopping cart and back-end pages, but redesign their homepage while keeping the catalog borders and styles. The existing design had a drop shadow around the main content along with several borders. 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 LiquidCanva

5. jQuery SVG Plugin

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

6. Drawing with jQuery

Today I played around with jQuery and drawing some basic shapes using the jQuery SVG plugin. It is awesome!

7. 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.

8. 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 derivated from the work of Walter Zorn for compatibility.

Share and Enjoy:
  • Print this article!
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

One Response to “Best jQuery Drawing Plugins”

  1. [...] This post was mentioned on Twitter by Mike Sprague and Hendrik, jquerywisdom. jquerywisdom said: Best jQuery Drawing Plugins http://is.gd/53vBJ [...]

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>