title: Zoom/scale from different point of image in canvas
body: <p>I have made a canvas in html5. I'm using it to show parts of a bigger image that you can move and I want to make it possible to zoom both in and out. But I do not know how to make the image scale from a certain point. When I increase the size of the image the part which is shown by the canvas is moved, I want the part in the center of the canvas to be the focus point when the scaling is complete, but no matter how I try it gets distorted some how. It seems like depending on which part of the image is shown, when the scaling happens that part of the picture is going to get moved to different coordinates. I do not know what type of algorithm I would have to use so calculate the movement of the image.</p>
  
  <p>This is a link to a visual example of the movement i mean, <a href="https://imgur.com/a/aZiVM" rel="nofollow noreferrer">https://imgur.com/a/aZiVM</a>, the two images are scaled the same but depending on which part of the image that is visible in the canvas, the amount the image needs to be moved tor the zoom differs.</p>
  
  <p>This is my code, but it isn't really working that well.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"&gt;&lt;/script&gt;
      &lt;style&gt;
          body {
              padding: 0px;
              margin: 0px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="map" style="position:absolute;top:10px;left:50px;"&gt;
          &lt;canvas id="canvas" width="800" height="600" style="float:left;border:1px solid #000000;"&gt;Your browser doesn't support canvas&lt;/canvas&gt;
          &lt;div id="floorDown" onMouseDown="zoomIn()" style="width:200px;height:50px;float:left;"&gt;Zoom in&lt;/div&gt;&lt;br&gt;
          &lt;div id="floorDown" onMouseDown="zoomOut()" style="width:200px;height:50px;float:left;"&gt;Zoom out&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script&gt;
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
  
      var canvasOffset=$("#canvas").offset();
      var offsetX=canvasOffset.left;
      var offsetY=canvasOffset.top;
  
      var startX;
      var startY;
      var isDown=false;
  
      //start position
      var imageX=0;
      var imageY=0;
      var imageWidth,imageHeight,imageRight,imageBottom;
      var draggingImage=false;
      var startX;
      var startY;
  
      var img=new Image();
      img.onload=function(){
          imageWidth=img.width;
          imageHeight=img.height;
          draw();
      }
  
      img.src='http://orig00.deviantart.net/35cb/f/2013/030/f/0/tripolar_by_zy0rg-d5t9tqh.png';
  
      function draw(){
          // clear the canvas
          ctx.clearRect(0,0,canvas.width,canvas.height);
          //Disable anti-aliasing
          ctx.imageSmoothingEnabled=false;
          // draw the image
          ctx.drawImage(img,0,0,img.width,img.height,imageX,imageY,imageWidth,imageHeight);
      }
  
      function handleMouseDown(e){
          startX=parseInt(e.clientX-offsetX);
          startY=parseInt(e.clientY-offsetY);
          draggingImage= true;
      }
  
      function handleMouseUp(e){
          draggingImage=false;
          draw();
      }
  
      function handleMouseOut(e){
          handleMouseUp(e);
      }
  
      function handleMouseMove(e){
          if(draggingImage){
              imageClick=false;
              mouseX=parseInt(e.clientX-offsetX);
              mouseY=parseInt(e.clientY-offsetY);
              // move the image by the amount of the latest drag
              var dx=mouseX-startX;
              var dy=mouseY-startY;
              imageX+=dx;
              imageY+=dy;
              // reset the startXY for next time
              startX=mouseX;
              startY=mouseY;
              // redraw the image with border
              draw();
          }
      }
  
  
      // TEST zoom in/out functions
      function zoomIn() {
          imageX=imageX*2;
          imageY=imageY*2;
          imageWidth=imageWidth*2;
          imageHeight=imageHeight*2;
          draw();
      }
      function zoomOut() {
          imageX=imageX/2;
          imageY=imageY/2;
          imageWidth=imageWidth/2;
          imageHeight=imageHeight/2;
          draw();
      }
  
      $("#canvas").mousedown(function(e){handleMouseDown(e);});
      $("#canvas").mousemove(function(e){handleMouseMove(e);});
      $("#canvas").mouseup(function(e){handleMouseUp(e);});
      $("#canvas").mouseout(function(e){handleMouseOut(e);});
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>