Phaser: Make background screen-width instead of content-width

Question

I am making a game using the Phaser Framework for Android. I need to make the canvas fill the entire screen width and then flood it with background color, then put content

Answer 1

You need Phaser 2.2+ for this, but if you want the canvas to fill the entire screen space available you would do:

var game = new Phaser.Game("100%", "100%", Phaser.CANVAS, 'parent');

...

game.scale.scaleMode = Phaser.ScaleManager.RESIZE;

Also you should not use pageAlign if you're using 100% dimensions. You also don't need to call refresh or setScreenSize.

When working in the RESIZE scale mode you can add a function to your States called 'resize'. It will be called whenever the screen dimensions change (orientation event perhaps) and be passed 2 parameters: width and height. Use those to adjust your game content layout.

You may want to get the Phaser Scale Manager book, it covers all this in lots more detail (caveat: I wrote it, but it has a "pay what you want" price, including completely free)