How can I make a Phaser game automatically fill the window?

Question

How can I make a Phaser game automatically fill the browser window? (And ideally, automatically refill if the window changes size.) I know that there is a ScaleManager class but the docs aren't clear how to use it. I've also found other instructions but they don't indicate where to add the code they suggest, and running it immediately after creating the Game class doesn't seem to do anything.

I am currently using the base code found in this tutorial, but am willing to change that completely.

Answer 1

Turns out to be quite simple, you just need to run this code in a preload or create function (instead of immediately after creating a game instance, as I had been trying).

this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
//this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;
this.scale.setScreenSize( true );

Note that setting this.scale.pageAlignHorizontally to true will actually mess up the horizontal alignment if you make the game go fullscreen. Instead you can centre the canvas with css:

canvas { margin: 0 auto; }