title: Capture all mouse coordinates while mousedown
body: <p>How can I capture all the coordinates the mouse moved through in mousedown event using plain javascript?</p>
  
  <pre><code>var my_canvas=document.getElementById("drawing-pad");
  var ctx=my_canvas.getContext("2d");
  my_canvas.addEventListener("mousedown", draw_on_click, false);
  
  function draw_on_click(e){
      var x_pos=e.clientX;
      var y_pos=e.clientY;
      ctx.fillStyle = "#FF0000";
      ctx.fillRect(x_pos,y_pos,15,15);
  }
  </code></pre>
  
  <p>I was expecting the handler to run on every coordinates (would be nice if it would!) but I was wrong.</p>
  
  <p>I saw the answer similar to my question <a href="https://stackoverflow.com/questions/10836538/how-can-i-retrieve-all-mouse-coordinates-between-mousedown-to-mouseup-event">here</a> in SO but it uses Jquery and I am trying to stay away from it because I want to start on using Angular after gaining some more proficiency in core and client javascript.</p>
  
  <p><strong>Thoughts:</strong> One thing comes to mind. Should I use setInterval inside the handler and capture clientX and clientY periodically and clear it out when mouseup event happens? Am I thinking it right? Is there better way to do this?</p>