Why does my paper.js code work different on win and on mac?

Question

const putImgBgOnCanvas = async (payload) => {
  if (payload) {
    const reader = new FileReader()
    reader.onload = (event) => {
      const img = new Image()
      img.onload = () => {
        const canvasAspectRatio = paperCanvas.value.width / paperCanvas.value.height;
        const imageAspectRatio = img.width / img.height;

        let width, height
        if (imageAspectRatio > canvasAspectRatio) {
          width = paperCanvas.value.width
          height = width / imageAspectRatio
        } else {
          height = paperCanvas.value.height
          width = height * imageAspectRatio
        }

        raster.value = new paperScope.value.Raster(img)
        raster.value.position = paperScope.value.view.center
        raster.value.size = new paper.Size(width, height)
        bgImage.value = {
          image: raster.value,
          originalWidth: raster.value.width,
          originalHeight: raster.value.height
        }

        const activeLayer = paperScope.value.project.activeLayer
          
        if (activeLayer.children[0] instanceof paperScope.value.Raster) {
          activeLayer.children[0].remove()
        }
        paperScope.value.project.activeLayer.insertChild(0, raster.value)
      }
      img.src = event.target.result
    }
    reader.readAsDataURL(payload)
    options.value.bgOptions.objectFit = 'contain'
  }
}

I use this function to load a background image into my paper.js vue3 project.
It works fine on windows, but when I try it on my m1 mac, the image is not loaded correctly. I looks like it is overflowing a parent with overflow: hidden property.
What can I do about it?