title: Make "ball" follow mouse on canvas
body: <p>I'm trying to make a ball follow the mouse around inside a canvas area. But the ball only get the first position when mouse enter the canvas area (so on the edges).</p>
  <p>What is wrong since the ball doesn't follow mouse when moving around inside canvas?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = startup;
  
  var ballX = 400;
  var ballY = 400;
  var mouseX = 0;
  var mouseY = 0;
  
  function startup() {
    document.getElementById("drawingArea").onmouseover = mouseMove;
    setInterval("moveBall()", 100);
  }
  
  function mouseMove(evt) {
    mouseX = evt.clientX;
    mouseY = evt.clientY;
  }
  
  function moveBall() {
    if (ballX &gt; mouseX) {
      ballX -= 5;
    } else {
      ballX += 5;
    }
    if (ballY &gt; mouseY) {
      ballY -= 5;
    } else {
      ballY += 5;
    }
  
    var canvas = document.getElementById("drawingArea");
    var ctx = canvas.getContext("2d");
  
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  
    ctx.beginPath();
    ctx.arc(ballX, ballY, 40, 0, 2* Math.PI);
    ctx.fillStyle = "green";
    ctx.fill();
    ctx.lineWidth = 5;
    ctx.strokeStyle = "red";
    ctx.stroke();
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#drawingArea {
    border-style: solid;
    position: absolute;
    top: 0;
    left: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Move Ball&lt;/title&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;canvas id="drawingArea" width="800" height="800" /&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>