title: HTML5 Canvas Resize image Click to Zoom
body: <p>I have an image of a map in a canvas that I would like to act like the google map interface using HTML5 and jQuery. I would like to perform the following actions:</p>
  
  <pre><code>• Double click on pan in without changing the size of the containing div
  
  • Click on a building to bring up a pop up of information on that building
  
  • Click and drag to pan
  </code></pre>
  
  <p>The code I have right now is the image in the canvas. I have found several codes that show "zooming" on the image, but either resize the container div or aren't a smooth and responsive way to do it, it just jumps to a larger size and I would like the zooming to be animated. </p>
  
  <p>There will be several buildings that are "pinned" on the map that the user can click on to bring up information about that building. </p>
  
  <p>The code is as follows:</p>
  
  <p>JS:</p>
  
  <pre><code>$( document ).ready( function() {
  var canvas = document.getElementById( 'canvas' );
  var context = null;
  var map = null;
  
  if( canvas.getContext )
  {
      context = canvas.getContext( '2d' );
  
      $( '#map' ).load( function( evt ) {
          context.drawImage( evt.currentTarget, 10, 10 );
      } );
  
      map = new Image();
      map.onload = function() {
          context.drawImage( this, 20, 20 );
      };
      map.src = 'images/asu_poly_map.png';
  } else {
      alert( 'Your browser does not support canvas.' );
  }
  } );
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="map"&gt;
  
  &lt;canvas id="canvas" width="1055" height="600"&gt;&lt;/canvas&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#map {
  margin:0 auto;
  margin-top : 180px;
  width : 1200px;
  }
  </code></pre>
  
  <p>EDITED TO ADD:
  I'm assuming it would be something similar to this, but can't figure out how to apply it to an image from the server being drawn onto the canvas.</p>
  
  <p><a href="https://stackoverflow.com/questions/2916081/zoom-in-on-a-point-using-scale-and-translate?lq=1">Zoom in on a point (using scale and translate)</a></p>