How to draw a line based on mouse move

Question

I am looking for a way to draw a line on mouse start to end. For example I have DIV and I have moved the mouse in circular way. But I want a line to be drawn in the path mouse is moved.

I am not looking for any HTML5 solution. I want it to be worked even in all modern browsers.

Please help me on this.

Shadow Wizard · Accepted Answer

I have written something 8 years ago, revised it 6 years ago and checked it now - still working. It's drawing lines by clicking on two points in the screen, but can be changed to mouse move instead with little tweaking.

It's in pure JavaScript, essentially it's appending pixel sized images to the document.

I will write here the code as-is. Please note it's really old and while working, might not be best practice.

  var PIXEL_PATH="https://i.sstatic.net/QXTrN.gif";
  var ST_LINE=1;
  var ST_CIRCLE=2;

  var strImageData="";
  var strUserInput="";
  var strImageName="";
  var iPointsCount=0;
  var iNumCalls=0;
  var loadComplete=false;
  var arrLines=new Array();
  var arrRedo=new Array();
  var strPoints="";
  var arrImages;
  var objWin;
  var INFINITY=-999999;
  var iLastX=INFINITY, iLastY=INFINITY;
  var drawStyle=ST_LINE;
  var arrPoints=new Array();
  var iCurrentImage=0;
  var blnLineFinished=true;
  var blnLoading=true;
  var strCurrentPoints="";

  document.onclick = DocumentClick;
  document.onkeyup = DocumentKeyup;
  self.onload=Init;


  function Init()
  {
   DrawPoint(0, 0);
   CommitDraw();
  }

  function DrawImage()
  {
   var x1, x2, y1,  y2;
   var iStep=12;
   blnLoading = true;
   for (j=0; j= ABS(x2-x1_old)) || (R(x1, y1, x2, y2) >= ABS(y2-y1_old)))
      {
         x1 += (ABS(x1-100) > ABS(document.body.clientWidth-100-x1))?-1:1;
         y1 += (ABS(y1-100) > ABS(document.body.clientHeight-100-y1))?-1:1;
         z++;
         if (z >= 100)
         break;
      }
   }
   else
   {
      x1=Rnd(document.body.clientWidth-30)+30;
      y1=Rnd(document.body.clientHeight-30)+30;
      x2=Rnd(document.body.clientWidth-30)+30;
      y2=Rnd(document.body.clientHeight-30)+30;
   }
   ClearLastPoint();
   Line(x1, y1, x2, y2);
   arrRedo = new Array();
   document.forms[0].redo.disabled = true;
   return true;
  }

  function ToNumber(str) {return (str*(-1)*(-1));}

  function Rnd(num) {return parseInt(Math.random()*num);}

  function DocumentClick()
  {
   var iCurX=window.event.x, iCurY=window.event.y;
//   blnLoading=false;
   if ((iLastX != INFINITY )&&(iLastY != INFINITY))
   {
      Line(iLastX, iLastY, iCurX, iCurY);
      if (drawStyle != ST_CIRCLE)
      {iLastX = iCurX; iLastY = iCurY;}
   }
   else
   {
      iLastX = iCurX;
      iLastY = iCurY;
   }
   arrRedo = new Array();
   document.forms[0].redo.disabled = true;
   return true;
  }

  function DocumentKeyup()
  {
   if (document.forms[0].all("load"))
      return false;
   strUserInput += String.fromCharCode(self.event.keyCode);
   if (strUserInput.toLowerCase().indexOf("shadow")>=0)
   {
      var objInput=document.createElement("INPUT");
      objInput.name = objInput.id = "load";
      objInput.type = "button";
      objInput.value = "Load";
      objInput.onclick = Load;
      document.forms[0].appendChild(objInput);
      return true;
   }
   if (strUserInput.length > 999)
      strUserInput.length = "";
   return false

  }

  function Line(x1, y1, x2, y2)
  {
   arrLines[arrLines.length] = drawStyle+AddZeros(x1, 3)+AddZeros(y1, 3)+
                               AddZeros(x2, 3)+AddZeros(y2, 3);

   blnLineFinished = false;
   strCurrentPoints = "";
   document.forms[0].undo.disabled = false;
   arrPoints = new Array();
   iCurrentImage = 0;

   if (!blnLoading)
   {
      divMsg.style.visibility = "visible";
      divMsg.style.left = x1+"px";
      divMsg.style.top = y1+"px";
   }

   arrImages=new Array();

   if (drawStyle == ST_CIRCLE)
      return Circle(x1, y1, x2, y2);

   if (x1 == x2)
   {
      for (y=MIN(y1, y2); y<=MAX(y1, y2); y++)
          DrawPoint(x1, y);
      return EndLine();
   }
   if (ABS((x2-x1))>=ABS((y2-y1)))
   {
      for (x=MIN(x1, x2); x<=MAX(x1, x2); x++)
          DrawPoint(x, Y(x, x1, y1, x2, y2));
      return EndLine();
   }
   else
   {
      for (y=MIN(y1, y2); y<=MAX(y1, y2); y++)
          DrawPoint(X(y, x1, y1, x2, y2), y);
      return EndLine();
   }
  }

  function Circle(x1, y1, x2, y2)
  {
   var y, x, r=R(x1, y1, x2, y2);
   var iFirst=(x1-r);
   var iLast=(x1+r);
   var iFirst2=(y1-r);
   var iLast2=(y1+r);
   for (x=iFirst; x<=iLast; x++)
   {
      y = Y2(r, x, x1, y1);
      DrawPoint(X2(r, y, x1, y1), y);
      DrawPoint(X3(r, y, x1, y1), y);
      y = Y3(r, x, x1, y1);
      DrawPoint(X2(r, y, x1, y1), y);
      DrawPoint(X3(r, y, x1, y1), y);
   }
   for (y=iFirst2; y<=iLast2; y++)
   {
      x = X2(r, y, x1, y1);
      DrawPoint(x, Y2(r, x, x1, y1));
      DrawPoint(x, Y3(r, x, x1, y1));
      x = X3(r, y, x1, y1);
      DrawPoint(x, Y2(r, x, x1, y1));
      DrawPoint(x, Y3(r, x, x1, y1));
   }
   iLastX=INFINITY;
   iLastY=INFINITY;
   return EndLine();
  }

  function R(x1, y1, x2, y2)
  {
   return Math.sqrt(((x2-x1)*(x2-x1))+((y2-y1)*(y2-y1)));
  }

  function EndLine()
  {
   CommitDraw();

   strPoints = strPoints.substr(0, strPoints.length-1)+"|";
   HideMessage();
   if (!blnLoading)
      divPointsCount.innerHTML = "0";
  }

  function HideMessage()
  {
   if (blnLineFinished)
   {
      divMsg.style.visibility = "hidden"; return true;
   }
   setTimeout("HideMessage();", 100);
  }

  function Y(x, x1, y1, x2, y2)
  {
   return (((y2-y1)/(x2-x1))*(x-x1))+y1;
  }

  function X(y, x1, y1, x2, y2)
  {
   return (((x2-x1)/(y2-y1))*(y-y1))+x1;
  }

  function Y2(r, x, x0, y0)
  {
   return (y0+Math.sqrt(ABS((r*r)-((x-x0)*(x-x0)))));
  }

  function X2(r, y, x0, y0)
  {
   return (x0+Math.sqrt(ABS((r*r)-((y-y0)*(y-y0)))));
  }

  function Y3(r, x, x0, y0)
  {
   return (y0-Math.sqrt(ABS((r*r)-((x-x0)*(x-x0)))));
  }

  function X3(r, y, x0, y0)
  {
   return (x0-Math.sqrt(ABS((r*r)-((y-y0)*(y-y0)))));
  }

  function ABS(n) {return (n>=0)?n:(n*-1);}

  function MAX(a1, a2) {return (a1>=a2)?a1:a2;}

  function MIN(a1, a2) {return (a1<=a2)?a1:a2;}

  function AddZeros(iNumber, iZeros)
  {
   var strZeros="";
   for (j=0; j= arrPoints.length)
   {
      blnLineFinished = true; return true;
   }
   if (blnLoading)
   {
      for (iCurrentImage=0; iCurrentImage=0);
  }

  function GetImageData()
  {
   var strAns="";
   for (k=0; k0)
      ClearLastLine();
   arrRedo[arrRedo.length] = arrLines[arrLines.length-1];
   document.forms[0].redo.disabled = false;
   var arrTemp=new Array();
   for (i=0; i=0)&&(strPoints.charAt(j) != "|"); j--)
       strToClear += strPoints.charAt(j);
   strPoints = strPoints.substr(0, strPoints.length-strToClear.length-1);
   var strTmp="";
   for (k=strToClear.length-1; k>=0; k--)
       strTmp += strToClear.charAt(k);
   strToClear = strTmp;
   var arrTmp=strToClear.split(",");
   iPointsCount -= arrTmp.length;
   for (i=0; i



It comes along with such HTML:


    
    
    
    
    



You can see it online in this fiddle.

It's using a single pixel image, you can download it here. (right click and choose Save As)

Originally it also supported saving the drawing to server and loading saved drawings using classic ASP but I assume it's not relevant for you so I've omitted it from the code.

How to draw a line based on mouse move

Answers (2)

Related Questions