mainCanvasSize in gameInit() does not seem to be initialized

[stisa]

I'm facing an issue where mainCanvasSize is zero (vec2(0,0)) when checking it in gameInit().
For reference, I am trying to create a box outside the canvas and then slide it in.
To do this, I want to pass the right edge of the canvas as position in the constructor. To get that position, I need to convert the canvas size from screen to world coord.

function gameInit() {
  worldSize = screenToWorld(mainCanvasSize)
  obstacle = new Obstacle(cameraPos.add(vec2(worldSize.x/2,0)))
  console.log(mainCanvasSize) //> Object { x: 0, y: 0 }
}

Interestingly, mainCanvas.width and .height are different when checked in gameInit() than in render and update, seems like the init is called before the engine is actually done initializing.
Am I missing something obvious?

Happens both on Firefox Nightly and Chrome, Windows 10. Page and scripts served by python -m http.server

PS: it would be nice to have a built-in worldSize counterpart to mainCanvasSize

[KilledByAPixel]

Looking at your code it seems like you want to use cameraScale to set the position of the object. You can also change this value to zoom the camera.

The canvas size and aspect ratio can change when a user resizes the window. The canvas width, height, and mainCanvasSize are set when an update occurs. Because of this you should avoid using the canvas width or height in an update, only for rendering.

Another thing that may help you is a fixed size canvas. You can do that by setting canvasFixedSize. This will add black bars on the sides or top and the canvas size will always be the same. You would use that instead of mainCanvasSize.

[stisa]

Thanks for the reply, I think I got the idea. By getting the width and height of the mainCanvas and scaling with cameraScale I can get the size of the visible world in world coord in gameInit and place everything that way.
Since cameraPos is by default at the center of the screen I got a little confused.