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

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

3. Drawing with jQuery

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

4. jQuery SVG Plugin

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

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

6. Drawing Lines With jQuery – Video Tutorial

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

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

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

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 table, and allows you to configure them in a variety of way

Web Site
Demo
Download

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 inside the DIV with 1×1 pixel image. Here s the complete code to draw line and circle into HTML document.

Web Site
Demo

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

Web Site

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 LiquidCanvas plugin to keep the page size small while retaining all of the visual effects.

Web Site
Demo

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

Web Site
Demo
Download

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

Web Site
Download

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.

Web Site
Demo
Download

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.

Web Site
Download