title: html canvas a line following mouse
body: <p>So i want to make a line follow mouse and on click to draw that line, i need this for drawing polygons. My idea was to draw a line every time mouse moves but then it makes mess with a lot of lines, so i decided to draw over old lines after mouse moves with white lines to clean up and so that there would be only one line that goes from a point of last clicked spot to current mouse location.<a href="http://jsfiddle.net/ZZEk8/272/" rel="nofollow">My jsFiddle for this.</a> but it doesn't work the way i want yes i draws polygons on clicking but there is no line following the mouse so i can't see what line I'm drawing. I don't see where is it wrong ? Maybe there is some ready solution that i didn't find ?  Mycode :</p>
  
  <pre><code>    var polygonX = [];
      var polygonY = [];
      var lineReady = 0;
      var whileLineX;
      var whiteLineY;
  
      $("#body").bind('mousemove', function (ev) {
          if (lineReady &gt;= 2) {
  
          var context;
          //clear old lines
          if (whiteLineX !== null &amp;&amp; whiteLineY !== null) {
              context = $("#canvas")[0].getContext('2d');
              context.moveTo(polygonX[lineReady - 1], polygonY[lineReady - 1]);
              context.lineTo(whiteLineX, whiteLineY);
              context.strokeStyle = '#ffffff';
              context.stroke();
          }
          //draw a new line
          context = $("#canvas")[0].getContext('2d');
          var offset = $('#body').offset();
          var x = ev.clientX - offset.left;
          var y = ev.clientY - offset.top;
  
          context.beginPath();
          context.moveTo(polygonX[lineReady - 1], polygonY[lineReady - 1]);
          context.strokeStyle = '#000000';
          context.lineTo(x, y);
          context.stroke();
  
          whileLineX = x;
          whiteLineY = y;
  
      }
  });
  
  
      $("#body").bind('click', function (ev) {
  
          var offset = $('#body').offset();
          var x = ev.clientX - offset.left;
          var y = ev.clientY - offset.top;
  
          polygonX
  
  .push(x);
      polygonY.push(y);
  
      lineReady++;
      if (lineReady &gt;= 2) {
  
          var context = $("#canvas")[0].getContext('2d');
  
          context.beginPath();
          context.moveTo(polygonX[lineReady - 2], polygonY[lineReady - 2]);
          context.lineTo(polygonX[lineReady - 1], polygonY[lineReady - 1]);
          context.stroke();
  
      }
  
  });`
  </code></pre>