Placement in the center of the canvas

Phaser 3
1

I have a canvas that always expands to 100% of the screen width when manipulating the browser window. I need the canvas center to always be visible in the center of the browser window even if is in window. The problem is that while I’m expanding the canvas by, for example, 100 px, it expands to the right. Can I somehow anchor this canvas so that it widens evenly left and right ( 50px left and 50 px right in this case)?

incorrectly enlarged canvas
correctly enlarged canvas

The grass has to be canvas in my case.
I tried also to put every sprite in container and move container when resizing window but there are a lot of problems, body position is calculated different and runs away from sprite etc.

2

By chance, did you happen to try using the Scale Manager? You can set the autoCenter property to Phaser.Scale.CENTER_BOTH and this should help center the canvas element for you.

Here is an an example: https://codepen.io/swesto01/full/yLeyOqB

Here is more information on the Scale Manager: https://photonstorm.github.io/phaser3-docs/Phaser.Scale.ScaleManager.html

3 
this.cameras.main.centerOn(X, Y);
4

Thanks for response. My canvas has always 100% of the window width. If i put something in the center of the canvas I need it to be always centered even when window is resized. I also need it to always be the same size, no scaling