I need to zoom in to the pointer location and the maximum zoom out location would be set to 1. the image is uplaoded to the canvas from the local system. Below is my js code snippet:

var canvas = new fabric.Canvas('canvas');

document.getElementById("uploader").onchange = function(e) {
  var reader = new FileReader();
  reader.onload = function(e) {
    var image = new Image();
    image.src = e.target.result;
    image.onload = function() {
      var img = new fabric.Image(image);
      img.set({
        left: 100,
        top: 60
      });
      img.scaleToWidth(1125);
      canvas.add(img).setActiveObject(img).renderAll();
    }
  }
  reader.readAsDataURL(e.target.files[0]);
}
canvas.on('mouse:wheel', function(opt) {
    var delta = opt.e.deltaY;
    var zoom = canvas.getZoom();
    zoom *= 0.999 ** delta;
    if (zoom > 20) zoom = 20;
    if (zoom < 0.01) zoom = 0.01;
    //canvas.setZoom(zoom);
    const center = canvas.getCenter();
    const centerPoint = new fabric.Point(center.left , center.right);
    canvas.setZoom(zoom);
    opt.e.preventDefault();
    opt.e.stopPropagation();
  })

HTML file:

<canvas id="canvas" width="1500" height="844" style="border:1px solid black"></canvas>