centering canvas

[Paul-Andre]

I've just started with phaser, and I'm wondering how I should center the canvas on the screen. I see that phaser can manage scaling, so I wonder if it could do the centering, or if I should mess with CSS myself, and how exactly.

[turnA]

You can use this to center your content:

 

this.game.stage.scale.pageAlignHorizontally = true;this.game.stage.scale.pageAlignVeritcally = true;this.game.stage.scale.refresh();

Although I think there's a minor typo in the source code. pageAlignVeritcally or pageAlignVertically?

[rich]

Opps, good spot! Fixed in 1.0.7

[Paul-Andre]

Thanks!

[dreta]

You can center content on a page by setting the horizontal margin to auto. For this to work with canvas you have to set display to block first.

canvas {   display : block;   margin : auto;}

This is how pages are centered. You either set the margin for the body or a div that holds the page content.

[SYNYST3R1]

What about centering with webgl?

[rich]

WebGL still uses a canvas tag, that is where the content is rendered. It just uses a different context.

[SYNYST3R1]

I tried 

this.game.stage.scale.pageAlignHorizontally = true;this.game.stage.scale.pageAlignVeritcally = true;this.game.stage.scale.refresh();

and it didn't work so I figured it was different for webgl. Not sure how to use it correctly.

[Stucky]

I tried this code

this.game.stage.scale.pageAlignHorizontally = true;this.game.stage.scale.pageAlignVeritcally = true;this.game.stage.scale.refresh();

with or without "this", but it doesn't work for me as well.

 

Sorry for a noob question, but where do you put it exactly? I put it under function create(), but it doesn't center.

I tried to make it fullscreen and put the code under function create(), and it works. I wonder why I can't center the game.

[Stucky]

I found the solution.

 

Instead of using the code

this.game.stage.scale.pageAlignHorizontally = true;this.game.stage.scale.pageAlignVertically = true;this.game.stage.scale.refresh();

Use this one instead:

this.game.scale.pageAlignHorizontally = true;this.game.scale.pageAlignVertically = true;this.game.scale.refresh();