title: Smoothest following animation in canvas
body: <p>I want to make a coordinate (coord1) follow another coordinate (coord2) as smoothly as possible with these following conditions:</p>
  
  <ol>
  <li>coord2 is able to move.</li>
  <li>coord1 follows coord2 in the smoothest way possible (arc fashion).</li>
  <li>coord1 follows at a constant speed.</li>
  </ol>
  
  <p>I have an example here but it only succeeds condition 1 and 3 not 2. In the example, you can move the ball with your arrow keys.
  <a href="https://jsfiddle.net/o5rshz1b/" rel="nofollow">Click here to go to the example</a></p>
  
  <p>Here is my code for following:</p>
  
  <pre><code>Obstacle.prototype.follow = function () {
    this.y += this.vSpeed
    this.x += this.hSpeed
  
    if (this.x &lt; ball.x - 9) {
      this.hSpeed = 1;
    }
    if (this.x &gt; ball.x - 10) {
      this.hSpeed = -1;
    }
    if (this.y &gt; ball.y - 10) {
      this.vSpeed = -1;
    }
    if (this.y &lt; ball.y - 9) {
      this.vSpeed = 1;
    }
  }
  </code></pre>
  
  <p>Anyone have a solution that succeeds all three conditions?</p>