Freelance Web Developer

Mar 16, 2010

Draw lines with jquery

There are three past posts about drawing with jquery, In first post i implanted the freehand draw, in second we learned about drawing rectangle with jquery and in third we were drawing circle with jquery. Today i am with you with one another shape( Line ). Let us see how we can draw horizontal and vertical lines with jquery.

As you know we can draw rectangle with jquery. To be true i have little changes in that technique, just added a width/height and border-(top/left) property .


<script type="text/javascript"> 
$(document).ready(function() {
  var x1,x2,y1,y2;
  $(document).mousedown(function(e) {
  box = $('<div style="border-left:1px #FF00FF solid;position:fixed;width:1px;">').hide();
  x1 e.pageX;
  y1 e.pageY;
                                tope.pageY //offsets
                                lefte.pageX //offsets
 $(document).mousemove(function(e) {
                     width:Math.abs(e.pageX x1), //offsets
                     height:Math.abs(e.pageY y1)//offsets
 $(document).mouseup(function() {
                             $("#current").attr({ id''


NOTE: For Horizontal lines, use border-top:1px #FF00FF solid;position:fixed;height:1px and For Vertical lines, use border-left:1px #FF00FF solid;position:fixed;width:1px


See this code in action
here for Draw Vertical lines.
here for Draw Horizontal lines. Drag mouse to draw.

Related posts

Freehand draw with Jquery
Drawing rectangle with Jquery
Drawing Circle with Jquery

Labels: ,

By :