I have a pre-rendered image which I display on screen. It has identical width and height, and is styled by css. It changes size when the window is resized and changes aspect ratio, but is always in the bottom right corner.

Now I want a threejs canvas to exactly match that image. I have exported it as a gltf and am displaying it in threejs. When the browser window has the exact same dimensions and aspect ratio a s the pre-rendered image, they match perfectly. However, as soon as the window is resized, they both go their own ways.

I have managed to match them under any conditions, when I set the canvas to the exact same dimensions as the image. Then, however, my canvas is limited to the borders of them image, which I don’t want.

How can I extend the canvas to the whole screen without losing the right aspect, fov and all this?

Here both the canvas and the pre-rendered image match (https://i.sstatic.net/Umv8zgZE.png)
Here they don’t (https://i.sstatic.net/EDUMSYFZ.png)
Same here (https://i.sstatic.net/epc5PZvI.png)