title: Implementing Pan/Zoom on a HTML5 Canvas with multiple images
body: <p>I'm working on a site in which a user can upload an image and then apply different effects on it(masks, texsts etc.). This is how the canvas element is called in HTML:</p>
  
  <pre><code>&lt;div&gt;
     &lt;div onload="draw();"&gt;
        &lt;canvas id="canvas" data-girar="0"&gt;
            &lt;div style="display:none;"&gt;
                &lt;img onload="draw()" id="imgDisp" src=""&gt;
                &lt;img id="maskDisp" src=""&gt;
            &lt;/div&gt;
        &lt;/canvas&gt;
      &lt;/div&gt;
      &lt;div id="text_content"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The two images are on top of each other and so is the "text_content" div. I want to implement a simple pan/zoom function so they all move together. Is there a way to do that? Thanks in advance. Also, here is the draw(); function:</p>
  
  <pre><code>function draw() {
  
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var newImg = document.getElementById('imgDisp');
  var newMsk = document.getElementById('maskDisp');
  var viewpanel = document.getElementById('view_panel');
  var textcontent = document.getElementById('text_content');
  document.getElementById("text_content").innerHTML = "";
  
  canvas.width = 700;
  canvas.height = 700;
  
  
  if (newImg.height &gt; 750 &amp;&amp; newImg.width &gt; 750){
      viewpanel.width = newImg.width/2;
      viewpanel.height = newImg.height/2;
      textcontent.style.height = "700px";
      textcontent.style.width = "700px";
      // Draw image
      ctx.drawImage(document.getElementById('imgDisp'),0,0,newImg.width/1.3,newImg.height/1.74);
      // Draw frame
      ctx.drawImage(document.getElementById('maskDisp'),0,0,newMsk.width/1.3,newMsk.height/1.74);
      text_size('1')
  }
  else if (newImg.height &lt; 500 &amp;&amp; newImg.width &lt; 500){{}
  
      viewpanel.width = newImg.width;
      viewpanel.height = newImg.height;
      canvas.height = 240;
      canvas.width = 240;
      textcontent.style.height = "240px";
      textcontent.style.width = "240px";
      // Draw image
      ctx.drawImage(document.getElementById('imgDisp'),0,0,newImg.width*2,newImg.height*2);
      // Draw frame
      ctx.drawImage(document.getElementById('maskDisp'),0,0,newMsk.width*2,newMsk.height*2);
      text_size('2')
  }
  </code></pre>
  
  <p>}</p>