(Un)zooming a canvas is not precise

When I zoom a canvas, usually multiple times, then unzoom the same number of times, the canvas doesn’t unzoom the same. Below are the results of 1 zoom in and 1 out. You see the image never goes back to exactly the original size.

This shows what the problem is. I do not think it’s a bug, just unexpected behavior.

console.log(bgImageCanvas.width); // original size: 300
 console.log(bgImageCanvas.width*1.1); // zoom in: 330
 console.log(bgImageCanvas.width*.9); // zoom out: 270` needs to be 300

Here’s my zoom function:

function zoomBgImage(callBtn) {
  let tempCanvas = createTmpCanvas(bgImageCanvas.width, bgImageCanvas.height);
  let tctx = tempCanvas.getContext("2d")
  let zoomAmount, newZoom;
  
  tctx.drawImage(bgImageCanvas, 0, 0);
  bgImagectx.clearRect(0, 0, bgImageCanvas.width, bgImageCanvas.height);
  bgImagectx.save();

  if (callBtn == "zoomIn") {
    zoomAmount = zoomInAmount;
    newZoom = currentZoom + zoomIncrement;
  } else {
    zoomAmount = zoomOutAmount;
    newZoom = currentZoom - zoomIncrement;
  }

  bgImageCanvas.width = bgImageCanvas.width * zoomAmount;
  bgImageCanvas.height = bgImageCanvas.height * zoomAmount;
  bgImagectx.scale(newZoom, newZoom);
  bgImagectx.translate(panX, panY);
  bgImagectx.drawImage(tempCanvas, 0, 0);
  bgImagectx.restore();
}