Canvas context offset problem?

I’m not sure what is going on but when I try to paint a canvas it seems like there is some kind of offset. Very strange behaviour.

When I try test it using the playground, things are fine and work as expected. (Notice how I marked each point)

But when I do my own test(without playground, with exact same code and setup) this happens:

I’m marking the exact same spots using the cursor. The grid is just a texture in the context of a texture canvas rendered in a plane(BabylonJS ground).

I suspect it has something to do with the canvas dimensions and aspect ratio because when I resize the browser window it messes up completely and the offset is really big. It doens’t happen in the playground don’t matter how I resize it. So I’m trying to understand how did the devs made it so well.

Just guess, maybe your canvas have a scale transform that will cause the problem.

on mobile? on 4K monitor? using just basic css or detecting devices?…

You have to add an event listener when you resize:

window.addEventListener("resize", function () {

if issue still occurs, try to create a minimal example and share URL


Thanks, it’s solved. I just added this to the code:

window.addEventListener("load", function(){engine.resize();})
window.addEventListener("resize", function(){engine.resize();})