I am loading a map which can be dragged and zoomed in and out with HTML5 canvas. This works perfect. I can also place a marker i.e. at pixel 500x 600y. But when I zoom the map in or out, the pixels obviously change and the 500x and 600y are not correct anymore. Therefore the marker will shift a little bit and its position is not correct anymore.

If I would zoom out once, and console log the map size which originally was 4097 x 2142 it now is 3687.3 x 1927.8. I think this also means that the original marker position of [500, 500] has to be recalculated to fix my issue... but I have no clue how to.

Been trying for days now to figure out how to fix this but I have no clue... can anyone please help me out on how to solve this matter?

I am using Vue (Nuxt) and HTML5 canvas. I can provide a zip with my project if that helps ;)

Below is the most important piece of code I recon:

// Initial position when the map is loaded (map size 4097x2142)
ICO_POS.value = [500, 500] // Icon will be displayed at 500x 6000y

// This function will check if we zoomed in or out
const zoom = (e) => {
  if (e.wheelDelta > 0) {
    zoomIn()
  } else {
    zoomOut()
  }
}

// Zoom in function
const zoomIn = (e) => {
  if (DEFAULT_ZOOM.value < MAX_ZOOM) {
    DEFAULT_ZOOM.value += ZOOM_STEP
  }
}

// Zoom out function
const zoomOut = (e) => {
  if (DEFAULT_ZOOM.value > MIN_ZOOM) {
    DEFAULT_ZOOM.value -= ZOOM_STEP
  }
}

// This function will draw the map and icons
const drawImage = () => {
    // Draw the map
    const w = image.width * DEFAULT_ZOOM.value
    const h = image.height * DEFAULT_ZOOM.value
    const x = DRAW_POS.value[0] - (w / 2)
    const y = DRAW_POS.value[1] - (h / 2)
    context.drawImage(image, x, y, w, h)
    
    // Draw the icon
    const w2 = (image2.width * 3) * DEFAULT_ZOOM.value
    const h2 = (image2.height * 3) * DEFAULT_ZOOM.value
    const x2 = ICO_POS.value[0] - (w2 / 2)
    const y2 = ICO_POS.value[1] - (h2 / 2)
    context.drawImage(image2, x2, y2, w2, h2)
}