title: How can I interpolate between 2 points when drawing with canvas?
body: <p>I have a paint-style application that works with touch events.</p>
  
  <p><img src="https://i.stack.imgur.com/uKJep.png" alt="example"></p>
  
  <p>The JavaScript code is...</p>
  
  <pre><code>var RADIUS = 10;
  var ctx = document.querySelector("canvas").getContext("2d");
  
  var getRandomColorFragment = function () {
      return Math.floor(Math.random() * 255);
  };
  
  document.body.addEventListener("touchstart", function (event) {
      ctx.fillStyle = "rgb(" + [getRandomColorFragment(), getRandomColorFragment(), getRandomColorFragment()].join() + ")";
  });
  
  document.body.addEventListener("touchmove", function (event) {
      // Prevent default behavior of scrolling elements.
      event.preventDefault();
  
      // Get a reference to the first touch placed.
      var touch = event.touches[0];
  
      // Draw a circle at the location of the finger.
      ctx.beginPath();
      ctx.arc(touch.pageX - RADIUS, touch.pageY - RADIUS, RADIUS, 0, Math.PI * 2);
      ctx.closePath();
      ctx.fill();
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/UrWep/" rel="nofollow noreferrer">jsFiddle</a>.</p>
  
  <p>You can test this on a platform that doesn't support touch events by using Chrome and opening the Web Inspector's settings and choosing <a href="https://developers.google.com/chrome-developer-tools/docs/mobile-emulation#emulate-touch-events" rel="nofollow noreferrer"><em>Emulate touch events</em></a>.</p>
  
  <p>When the finger/pointer moves very fast, it fails to paint the canvas continually like which would be expected (see screenshot above). It seems I can only get the touches' coordinates only as fast as the <code>touchmove</code> event is triggered.</p>
  
  <p>I thought that I could determine if there is a big enough gap between arcs using the Distance Formula (<code>c2 = a2 + b2</code>) and determining if it's larger than the <code>RADIUS</code> constant. This part worked well. The next thing I needed to figure out is how to interpolate between the two points: the previous registered touch's coordinates and the newly registered coordinates'.</p>
  
  <p>So, essentially, I'd like to know how I could interpolate between the two points I have to determine how to <em>fill-in</em> the gap.</p>