Canvas context offset problem?

Questions
1

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.

https://www.babylonjs-playground.com/#DK424Y#30

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

image
image759×758 207 KB

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

image
image750×751 197 KB

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.

2

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

3

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

4

You have to add an event listener when you resize:

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

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

2 Likes
5

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

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