I recently had a need to draw lines for an online game I was working on. There were couple of options out there, but one that is simple, cross browser and light was ahrd to find. After some research I have written a simple jQuery plugin to draw simple, black lines. With some research on canvas and VML this plugin can be enhanced to include different colors, line thickness etc.

Usage

First the element to be drawn onto should have in the style attribute the position relative.

The plugin works on Firefox, Opera and Internet Explorer 7+, however Internet Explorer requires some additional HTML and CSS to function properly. The doctype should have the vml namespace applied:

And in the following CSS class should be included:

v: line {behavior:url(#default#VML);}

You should then include the attached JS file. Then you can use this plugin on the target element to draw a line, as follows:

$("#targetdiv").drawLine(x1, y1, x2, y2);

This will draw a line from x1,y1 to x2,y2, taking top left corner of the element as the reference origin.