title: How to pause a javascript animation event
body: <p>I've made some pacman-like shapes that are animated on an html5 canvas and they can currently follow the mouse (wherever the mouse moves) when a button is clicked on the page. In addition to following the cursor, the objects can move in four directions (i.e. left, right, up, down) when each corresponding button is pressed. The problem is that once the follow button is clicked, the objects will continue to follow the cursor even after any other button is clicked. I need a way to have another button that can be clicked to interrupt the "follow" event. If this is not possible, using a setInterval function call to set a time limit for the follow event could possibly work, but I'm not sure how to implement that. What would be the best way to implement this functionality?
  The code for the "follow" animation is below:</p>
  
  <pre><code>function getMousePos(canvas, evt) {
              var rect = canvas.getBoundingClientRect();
              return {
                  x: evt.clientX - rect.left,
                  y: evt.clientY - rect.top
              };
          }
          $("#follow").click(function () {
              canvas.addEventListener('mousemove', function (evt) {
                  //WokkaWokkas is the array of the pacman objects
                  var mousePos = getMousePos(canvas, evt);
                  WokkaWokkas[0].posX = mousePos.x - 50;
                  WokkaWokkas[0].posY = mousePos.y - 50;
                  WokkaWokkas[1].posX = WokkaWokkas[0].posX - 100;
                  WokkaWokkas[1].posY = WokkaWokkas[0].posY - 100;
  
              }, false);
          });
  </code></pre>
  
  <h3>Edit - Relevant code for second solution:</h3>
  
  <pre><code> $("#follow").click(function () {
          //not sure if this is the syntax for using (canvas).on
          (canvas).on('mousemove', function (evt) {
              var mousePos = getMousePos(canvas, evt);
              WokkaWokkas[0].posX = mousePos.x - 50;
              WokkaWokkas[0].posY = mousePos.y - 50;
              WokkaWokkas[1].posX = WokkaWokkas[0].posX - 100;
              WokkaWokkas[1].posY = WokkaWokkas[0].posY - 100;
          }, false);
      });
      animationLoop();
  
  $("#up").click(function () {
      $(canvas).off('mousemove');
      WokkaWokkas[0].direction = up;
  });
  $("#down").click(function () {
      $(canvas).off('mousemove');
      WokkaWokkas[0].direction = down;
  });
  $("#left").click(function () {
      $(canvas).off('mousemove');
      WokkaWokkas[0].direction = left;
  });
  $("#right").click(function () {
      $(canvas).off('mousemove');
      WokkaWokkas[0].direction = right;
  });
  $("#unfollow").click(function () {
      $(canvas).off('mousemove');
      WokkaWokkas[0].posX = 25;
      WokkaWokkas[0].posY = 25;
  });
  </code></pre>