画布如何在特定位置放大？

Question

我有一个下面的画布图像，当我使用画布比例缩放图像时，图像会一直缩放到图像的位置编号1（左上角），但我想缩放到2号（中间）或3号（右下角），我该如何实现？

我已经尝试了转换，翻译...的方法，但是没有一个起作用。

下面是我的代码：

var offset = {
  offsetX: 0,
  offsetY: 0
}

var translate = {
  translateX: 0,
  translateY: 0
}

function draw() {
  ctx.save();

  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

  ctx.setTransform(scale, 0, 0, scale, translate.translateX, translate.translateY);
}

// when zoom in 
document.getElementById("zo").addEventListener("click", function() {
  if (scale >= 2) {
    translate.translateX = 0;
    translate.translateY = 0;

    scale /= scaleFactor;

    draw();

    zoomLevel -= 1;

    $("#zoomLevel").text("Zoom Level " + zoomLevel);
  }
}, false);

//when zoom out
document.getElementById("zi").addEventListener("click", function() {
  if (scale < 8) {
    scale *= scaleFactor;
    //ctx.translate(500,500);
    translate.translateX = 0;
    translate.translateY = 0;
    // ctx.translate(transform.x , transform.y);
    draw();
    zoomLevel += 1;
    $("#zoomLevel").text("Zoom Level " + zoomLevel);
    console.log("Scale" + scale);
  }
}, false);

我的代码中缺少任何内容吗？我不知道为什么无法缩放到特定位置。预先感谢