Холст, как увеличить в определенном месте?

Question

У меня есть изображение холста, как показано ниже, когда я масштабирую изображение, используя масштаб холста, изображение продолжает увеличиваться до положения номер 1 (верхний левый угол) изображения, но я хотел бы увеличить до положения, такого как номер 2 (средний) или номер 3 (нижний правый) угол, как мне этого добиться?

Я уже попробовал метод transform, translate ... но ничего из этого не работает.

Ниже мой код:

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);

Что-то отсутствует в моем коде? Я понятия не имею, почему не работает увеличение до определенного места. Заранее спасибо