title: JavaScript ball in a canvas element does not follow cursor
body: <p>I am trying to create a simple program in JavaScript ES6 that makes a ball follow my cursor.  The ball moves, but it moves faster than my cursor.  Here is the code:</p>
  
  <p><code>index.html</code> is just a normal html document with a canvas element in it with an ID of "game_canvas"</p>
  
  <p><code>game.js</code></p>
  
  <pre><code>// global vars
  game_canvas = document.getElementById("game_canvas");
  
  class Ball {
      constructor() {
          this.ctx = game_canvas.getContext("2d");
      }
  
      drawCircle(X, Y) {
          this.ctx.beginPath();
          this.ctx.arc(X, Y, 15, 0, 2 * Math.PI);
          this.ctx.fillStyle = "red";
          this.ctx.fill();
      }
  }
  
  // MOUSE COORDS DETECTION
  function getMousePos(event) {
      return {
          x: event.clientX,
          y: event.clientY 
      };
  }
  // END COORDS DETECTION
  
  let follower = new Ball(0, 0, game_canvas);
  
  // START EVENT LOOP
  game_canvas.addEventListener("mousemove", function(event) {
      let mousePos = getMousePos(game_canvas, event);
  
      follower.ctx.clearRect(0, 0, game_canvas.width, game_canvas.height);
      follower.drawCircle(mousePos.x, mousePos.y);
  
  }, false)
  // END EVENT LOOP
  </code></pre>
  
  <p><strong>Update</strong> I removed the canvas argument from the getMousePos() function.</p>