title: How to pan the canvas?
body: <p>I have these event listeners in my code</p>
  
  <pre><code>canvas.addEventListener('mousemove', onMouseMove, false);
  canvas.addEventListener('mousedown', onMouseDown,false);
  canvas.addEventListener('mouseup', onMouseUp, false);
  </code></pre>
  
  <p>These functions will help me to pan the canvas. I have declared a variable in the <code>onLoad</code> called <code>pan</code>, <code>isDown</code>, <code>mousePostion</code> and previous mouse positions.  Then in the initialise function is set the <code>pan</code>,<code>mousePos</code> and <code>premousepos</code> to vectors containing 0,0</p>
  
  <pre><code>function draw() {
      context.translate(pan.getX(), pan.getY());
      topPerson.draw(context);
      console.log(pan);
  }
  
  function onMouseDown(event) {
      var x = event.offsetX;
      var y = event.offsetY;
      var mousePosition = new vector(event.offsetX, event.offsetY);
  
      previousMousePosition = mousePosition;
  
      isDown = true;
  
      console.log(previousMousePosition);
      console.log("onmousedown" + "X coords: " + x + ", Y coords: " + y);
  }
  
  function onMouseUp(event) {
      isDown = false;
  }
  
  
  function onMouseMove(event) {
      if (isDown) {
          console.log(event.offsetX);
          mousePosition = new vector(event.offsetX, event.offsetY);
          newMousePosition = mousePosition;
          console.log('mouseMove' + newMousePosition);
  
          var panX = newMousePosition.getX() - previousMousePosition.getX();
          var panY = newMousePosition.getY() - previousMousePosition.getY();
          console.log('onMouseMove:  ' + panX);
          pan = new vector(panX, panY);
          console.log('mouseMove' + pan);
  
      }
  }
  </code></pre>
  
  <p>But it is not registering the new <code>pan</code> Values so you could attempt to drag the canvas. I know my mouse dragging events work but is just doesnt <code>pan</code>.</p>