title: Draw a line on mouse drag on a canvas loaded with an image
body: <p>I have a canvas loaded with an image.<br>
  Now, I want to mark lines on some part of the image.<br>
  So, I wrote some code which draws a line on mouse drag.</p>
  
  <pre><code>function drawLine(x, y) {
      ctx.beginPath();
      ctx.moveTo(startX, startY);
      ctx.lineTo(x, y);
      ctx.closePath();
      ctx.stroke();
      ctx.restore();
  }
  
  canvas.onmousedown = function (e)  {
      ctx.save();
      e.preventDefault();
      e.stopPropagation();
      startX = parseInt(e.clientX - offsetX);
      startY = parseInt(e.clientY - offsetY);
      isDown = true;
  }
  canvas.onmousemove = function (e)  {
      if (!isDown) {
          return;
      }
      e.preventDefault();
      e.stopPropagation();
      mouseX = parseInt(e.clientX - offsetX);
      mouseY = parseInt(e.clientY - offsetY);
      drawLine(mouseX, mouseY);
  }
  canvas.onmouseup = function (e)  {
      if (!isDown) {
          return;
      }
      e.preventDefault();
      e.stopPropagation();
      isDown = false;
  }
  </code></pre>
  
  <p>The issue now is that, the drag creates a series of lines instead of one.<br>
  I have tried to save the context before drawing and restore it after drawing, but didn't help.</p>
  
  <p>Note that, I cannot clear the canvas using <em>clearRect()</em>, as my image data will be lost.
  Here, I have used a dummy image.</p>
  
  <p>I have created a <a href="http://jsfiddle.net/BLnf2/4/" rel="nofollow">fiddle</a>.</p>
  
  <p>Any help would be appreciated.</p>
  
  <p>Regards,<br>
  Rohith</p>