Any boilerplate for container alignment, sizing and scaling?

[mwatt]

I'm having a little trouble approaching all of these issues.  The Pixi documentation is a tad sparse.  I intend to go with the approach in which a display object container will wrap all elements, but there are several unknowns, at least for me:

 

1.  Is there any good cross browser way of exactly fitting the rendering area, i.e. stage, into the viewable area of the browser?

2.  How do I size the overall container to match the stage dimensions?

3.  Are there any built-in alignment capabilities?

4.  Is stage affected by CSS?

5.  Are display object containers affected by CSS?

 

In the end, I am looking to have my pixi-rendered content centered horizontally and vertically and take up most of the viewing area.  I also want my code to respond reasonably to changes in aspect ratio.

 

I'm looking for example code, ideally, but would appreciate any informal answers in part or in whole regarding these questions.  I know I am asking for your time to save my time and your time is precious to you too.  So thanks in advance for any input you can give.

[rich]

3 - Nope

4 - Yes, as Stage creates a canvas object so any CSS set specifically for canvas objects, or the body as a whole, will impact the Stage too

5 - No, not at all

 

1 & 2 are too long for me to answer here, sorry

[mwatt]

I finally got this somewhat sorted out - there were miscellaneous gotchas here and there.  The two biggest:

1. It looks like it is best not to set the position of the "scene" DisplayObjectContainer at all - at least not when centering and when Pixi shares the page with a div above the canvas.

2. Resetting the height and width of the canvas as necessary using <canvas>.style.height and <canvas>.style.width.  You helped even more than you thought Rich - I picked up on this trick by looking in the Phaser source.