title: Canvas: Zooming and Panning
body: <p>I am struggling to make this canvas drawing to zoom in and out and panning it. There are some examples with panning and zooming images but my case is different and I don't know what or how should I do it in my case cause it is not images. I would appreciate any tips or any library that you could suggest?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style type="text/css"&gt;
          canvas{border:#666 1px solid;}
  
      &lt;/style&gt;
    &lt;script type="application/javascript" language="javascript"&gt;
    window.onload=draw;//execute draw function when DOM is ready
      function  draw(){
          //assign our canvas element to a variable
            var canvas=document.getElementById('canvas1');
          //create the html5 context object to enable draw methods
            var ctx=canvas.getContext("2d");
  
                ctx.beginPath();
                ctx.arc(150, 200, 20, 0, 2 * Math.PI);
                ctx.fill();
  
                ctx.beginPath();
                ctx.moveTo(150,200);
                ctx.lineTo(230,75);
                ctx.stroke();
  
                ctx.beginPath();
                ctx.arc(230, 75, 20, 0, 2 * Math.PI);
                ctx.fill();
  
                ctx.beginPath();
                ctx.moveTo(230,75);
                ctx.lineTo(300,200);
                ctx.stroke();
  
                ctx.beginPath();
                ctx.arc(300,200, 20, 0, 2 * Math.PI);
                ctx.fill();
  
                ctx.beginPath();
                ctx.moveTo(300,200);
                ctx.lineTo(150,200);
                ctx.stroke();
  
                ctx.beginPath();
                ctx.moveTo(300,200);
                ctx.lineTo(225,300);
                ctx.stroke();
  
                ctx.beginPath();
                ctx.arc(225,300, 20, 0, 2 * Math.PI);
                ctx.fill();
  
  
  
  
  
            //fillStyle (r, g, b, alpha)
              //ctx.fillStyle = "rgba(0,200,0,1)";
            //fillRect (X, Y, Width, height)
              //ctx.fillRect(36,10,220,120);
      }
      &lt;/script&gt;
  &lt;/head&gt;
    &lt;body&gt;
        &lt;center&gt;
        &lt;canvas id="canvas1" width="800" height="600" &gt;&lt;/canvas&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is a screenshot of my drawing that I am trying to make it zoom in mouse cursor: </p>
  
  <p><a href="https://i.stack.imgur.com/qjuNR.png" rel="nofollow noreferrer">canvas drawing</a></p>