Scale Manager
It's on the game's scale or this.scale in a scene.
Configure in the scale property of the game config. Some values (e.g., width, height, parent) can also be put directly in the game config.
Use scale mode FIT and skip the rest.
Debugging Scale Manager issues is a bit of a hassle, and requires some CSS/HTML knowledge.
The parent is where you want to insert the game canvas. The default parent is the document body, representing the browser window. This is the simplest setup, and generally all you need is
body { margin: 0; }If you've turned off expandParent, you would use
html { height: 100%; }
body { margin: 0; height: 100%; }You can give an HTML Element or its id as a parent config value. (There's no warning if you give a bad id.)
When expandParent is on (the default), Phaser will try to fix a zero-height parent and ancestors by giving them height: 100%.
The Scale Manager does whole-canvas scaling or resizing, depending on the scale mode.
Scaling means canvas pixels are mapped onto CSS pixels, e.g.,
<!-- 100×100 canvas is scaled up to fit 200×200 parent -->
<canvas width=100 height=100 style="width: 200px; height: 200px"></canvas>The scaling modes are FIT, ENVELOP, HEIGHT_CONTROLS_WIDTH, and WIDTH_CONTROLS_HEIGHT.
zoom is a scale multiplier that can be used alone (i.e., with scale mode NONE) or with the other modes.
All scaling involves some pixel distortion, and scaling up will lose detail.
Resizing means canvas pixels are added or removed, e.g.,
<!-- Canvas is resized to fit 200×200 parent -->
<canvas width=200 height=200></canvas>If you set antialiased: false or pixelArt: true in the game config, Phaser will add image-rendering: pixelated or similar to the game canvas styles, but some browsers will always antialias a scaled WebGL canvas.
No scaling or resizing, but it's still running and emits events.
Scale to fit, meaning the largest size where both canvas dimensions don't exceed the parent. If the aspect ratios don't match, there will be gaps ("bars") one one axis.
Scale to fill, meaning the smallest size where both canvas dimensions meet the parent. If the aspect ratios don't match, the canvas will be clipped on one axis. You should ensure that only nonessential game content gets hidden.
The canvas is resized to match the parent exactly.