Center and zoom in on a point when drawing from a second canvas

Question

Update: I found a solution to my own question. See answer below.

I'm working on a center-and-zoom feature for my canvas. When the user clicks on the screen, the clicked point should be moved to the center and zoomed in.

I have two canvases. The first canvas is rendered on screen and shows a portion of the second canvas. The second canvas is not a true "OffscreenCanvas" but is stored in memory only.

The panning and zooming is done in increments using requestAnimationFrame.

Since it's probably a good idea to let the "offscreen canvas" remain unaltered, I'm attempting to apply all of the changes to the onscreen canvas. Panning is simple enough, but how to combine panning and zooming?

In the current code, zooming is achieved by shrinking the size of the viewport (viewportWidth or Height -= viewportWidth or Height * 0.01). I then compensate for the smaller viewport by panning a bit further than I would have otherwise (+ viewportWidth or Height * 0.01 * 0.5).

[![image explaining my problem with panning and zooming][1]][1]

However, with this solution, the screen centers on a point to the left of where the user clicked. Can you tell me what I'm doing wrong?

Alternatively, if there is a better way to go about this, I would be very happy to hear about it.

This is what I've come up with so far:

// Global variables:
onscreenCanvas
offscreenCanvas
viewportPositionX
viewportPositionY
viewportWidth
viewportHeight

document.addEventListener('click', (event) => {

let counter = 0

// Distance from clicked point to center of screen:
let panX = -(window.innerWidth/2 - event.pageX)
let panY = -(window.innerHeight/2 - event.pageY)

function panAndZoom() {
// Pan one percent of the distance:
viewportPositionX += panX * 0.01
viewportPositionY += panY * 0.01

let ctx = onscreenCanvas.getContext('2d')

ctx.drawImage(
offscreenCanvas,
viewportPositionX + viewportWidth * 0.01 * 0.5,
viewportPositionY + viewportHeight * 0.01 * 0.5,
viewportWidth - viewportWidth * 0.01,
viewportHeight - viewportHeight * 0.01,
0,
0,
window.innerWidth,
window.innerHeight)

// Shrink viewport by one percent:
viewportWidth -= viewportWidth * 0.01
viewportHeight -= viewportHeight * 0.01

counter++

if (counter <= 100) {
window.requestAnimationFrame(panAndZoom)
}

}

panAndZoom()

})


  [1]: https://i.stack.imgur.com/b9DR7.png

Answer 1

Okay, so I found a solution. Instead of decreasing the size of the viewport for each redraw, I should have increased the size of the scaling.

let scaleX = viewportWidth * 0.005
let scaleY = viewportHeight * 0.005

[...]

ctx.drawImage(
offscreenCanvas,
viewportPositionX + scaleX * 0.5,
viewportPositionY + scaleY * 0.5,
viewportWidth - scaleX,
viewportHeight - scaleY,
0,
0,
window.innerWidth,
window.innerHeight)

scaleX += viewportWidth * 0.005
scaleY += viewportHeight * 0.005