Implementing Pan/Zoom on a HTML5 Canvas with multiple images

Question

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:

<div>
   <div onload="draw();">
      <canvas id="canvas" data-girar="0">
          <div style="display:none;">
              <img onload="draw()" id="imgDisp" src="">
              <img id="maskDisp" src="">
          </div>
      </canvas>
    </div>
    <div id="text_content"></div>
</div>

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:

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 > 750 && newImg.width > 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 < 500 && newImg.width < 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')
}

}

Answer 1

Here's a copy/paste of part of a paint app I made. The user sets the zoom level (input id of 'zoom') and it's used on all calculations. Whatever the zoom percentage is you want to inverse it (1/n) and since mine is labeled % I use 100/n. My app's pan capabilities come from the outer div being overflow: auto . Also I'm not placing any elements inside the canvases; the canvas has a background image, and the drawings are overlays that can be saved as separate png images. I'm not sure what effect if any this will have on your situation.

$('canvas').mousemove(function(e) {
    // x and y are globals, x inits to null, mousedown sets x, mouseup returns x to null
    if (x==null) return;
    x = (100/$('#zoom').val())*(e.pageX - $(this).offset().left);
    y = (100/$('#zoom').val())*(e.pageY - $(this).offset().top);
});