title: HTML5 Canvas Viewport for Web Application
body: <p>I've been trying to get my head around this for a couple of days now and can't work it out from similar questions.</p>
  
  <p>There are 2 canvases, a scaled viewport that shows a portion of a larger background, and a zoomed-out camera map. When the second canvas is clicked, the viewport should move to that area of the background.<div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var onClick,
  onLoad = function () {
      var canvas,
          viewport,
          context,
          canvasWidth,
          canvasHeight,
          viewportContext,
          background = {},
          camera,
          scale = 4;
  
      function init() {
          background.image = new Image();
          background.image.src = "http://upload.wikimedia.org/wikipedia/commons/4/4e/Coronation_of_Ahmad_Shah_Durrani_in_1747_by_Breshna.jpg";
          canvas = document.getElementById("canvas");
          context = canvas.getContext("2d");
          viewport = document.getElementById("viewport");
          viewportContext = viewport.getContext("2d");
          camera = {
              x: canvas.width/2,
              y: canvas.height/2,
              width: canvas.width/scale,
              height: canvas.height/scale
          };
          background.width = canvas.width * scale;
          background.height = canvas.height * scale;
         
      };
   
     // Translate viewport's context to camera pos
      function moveContext() {
          viewportContext.setTransform(1, 0, 0, 1, 0, 0); // Reset context
          viewportContext.translate(camera.x*scale, camera.y*scale);
      };
   
     // Update camera's position
      function moveCamera(vector) {
          camera.x = vector.x;
          camera.y = vector.y;
          moveContext();
      };
  
      function draw() {
          context.drawImage(background.image, 0, 0, canvas.width, canvas.height);
        // Draw camera guide
          context.strokeStyle = 'red';
          context.beginPath();
          context.moveTo(camera.x - camera.width / 2, camera.y - camera.height / 2);
          context.lineTo(camera.x + camera.width / 2, camera.y - camera.height / 2);
          context.lineTo(camera.x + camera.width / 2, camera.y + camera.height / 2);
          context.lineTo(camera.x - camera.width / 2, camera.y + camera.height / 2);
          context.lineTo(camera.x - camera.width / 2, camera.y - camera.height / 2);
          context.stroke();
    
         // Draw viewport background
          viewportContext.clearRect(0, 0, viewport.width, viewport.height);
          viewportContext.drawImage(background.image, -background.width/2, -background.height/2, background.width, background.height);
      };
  
      function update() {
      };
  
      function gameLoop() {
          update();
          draw();
          requestAnimationFrame(gameLoop);
      };
  
  
      onClick = function (event) {
          var x = event.offsetX,
              y = event.offsetY;
  
          //alert("x: " + x + "\ny: " + y);
          moveCamera({ x: x, y: y });
      };
  
  
      init();
      requestAnimationFrame(gameLoop);
  
      
  };
  
  if (window.addEventListener) {
      window.addEventListener("load", onLoad, false);
      window.addEventListener("click", function () { onClick(event) }, false);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
    display:block;
    margin:15px;
    border:1px solid #000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="viewport" width="400" height="240"&gt;HTML5 Canvas not supported!&lt;/canvas&gt;
  &lt;canvas id="canvas" width="400" height="240"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Currently I'm getting the coordinates of a mouse click, setting the camera to that position, resetting the transformation matrix of the viewport and then translating the viewport's context to the camera position.</p>
  
  <p>Obviously, there is a fundamental part of the theory that I'm missing.</p>
  
  <p>What am I missing?</p>