Canvas: Zooming and Panning

Question

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?

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        canvas{border:#666 1px solid;}

    </style>
  <script type="application/javascript" language="javascript">
  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);
    }
    </script>
</head>
  <body>
      <center>
      <canvas id="canvas1" width="800" height="600" ></canvas>
  </body>
</html>

This is a screenshot of my drawing that I am trying to make it zoom in mouse cursor:

canvas drawing

How to zoom at mouse coord https://stackoverflow.com/a/45528455/3877726 How to zoom, pan, with bounds constraints https://stackoverflow.com/a/44015705/3877726 Both use a version of object called view. Second is more detailed and will work for any type of canvas rendering. — Blindman67, Nov 29 '17 at 16:20

score 0 · Answer 1 · answered Jun 24 '20 at 16:28

Panzoom (https://github.com/timmywil/panzoom) says that it supports panning and zoom basically any HTMLElement, including a canvas:

Panzoom uses CSS transforms to take advantage of hardware/GPU acceleration in the browser, which means the element can be anything: an image, a video, an iframe, a canvas, text, WHATEVER.

Deep · Answer 2 · 2020-07-22T12:27:08.827

If you're okay with buttons instead of "drag to pan", you can use translate method for panning. You can also use save() and restore() methods or following approach. Here's what I used in similar situation, but I've used buttons:

<html>
<head>
<script>
window.onload = function() {
   scale = 1;
   canvas = document.getElementById("canvas"); //Replace with id of your canvas
   ctx = canvas.getContext("2d");
   ctx.translate(150, 75);
   drawcanvas();
} 
  
function drawcanvas() {
  ctx.beginPath();
  //call to function(s) which draws necessary things
  //..
  //..
  drawarrow(ctx);
  ctx.stroke(); 
}
    
function clearcanvas() {
  let current_transform = ctx.getTransform();
  ctx.setTransform(1.1, 0, 0, 1.1, 0, 0);
  ctx.clearRect(0, 0, canvas.width*scale, canvas.height*scale);
  ctx.setTransform(current_transform);
}

function zoomin() {
  clearcanvas();
  scale = 1.1;
  ctx.scale(scale, scale);
  drawcanvas();
}

function zoomout() {
  clearcanvas();
  scale = 1.0/1.1;
  ctx.scale(scale, scale);
  drawcanvas();
}

function moveleft() {
  clearcanvas();
  ctx.translate(-10, 0);
  drawcanvas();
}

function moveright() {
  clearcanvas();
  ctx.translate(10, 0);
  drawcanvas();
}
</script>
</head>

<body>
  <canvas id="c" class="container h-75"  style="border: solid 1px blue"></canvas><br />
  <button onclick="zoomin()" class="btn btn-dark">+</button>
  <button onclick="zoomout()" class="btn btn-dark">-</button>
  <button onclick="moveleft()" class="btn btn-dark"><-</button>
  <button onclick="moveright()" class="btn btn-dark">-></button>
</body>
</html>

EDIT: I found better solution for panning problem, check this question and it's accepted answer.

Canvas: Zooming and Panning

2 Answers2