How to fit PIXI renderer into browser width and height?

[Alexander Farber]

Good morning!

I am working on a word game embedded in a Wordpress front page, which uses PIXI.js to draw the game board and above and below it - few jQuery elements like buttons and selectmenu.

While I come along nicely, there is one problem I do not know how to solve and wonder how other PIXI-developers solve it - the hardcoded canvas size (I have set it to 1020 x 1080) is too big for some browsers.

For example here are 2 Google Chrome screenshots at my Macbook Air:

Also, I plan to embed my game in Facebook Canvas, which will make the screen estate even more scarce.

Here is an excerpt of my JavaScript-code, how to improve it please?

    var renderer = new PIXI.autoDetectRenderer(1020, 1020 + 60, { 
            view: document.getElementById('board')
    });
    renderer.view.style.padding = '4px';
    renderer.backgroundColor = 0xFFFFFF;

    var charm = new Charm(PIXI);

    var stage = new PIXI.Sprite();
    stage.interactive = true;
    stage
            .on('mousedown',  onDragStart)
            .on('touchstart', onDragStart)
            .on('mousemove', onDragMove)
            .on('touchmove', onDragMove)
            .on('mouseup',         onDragEnd)
            .on('mouseupoutside',  onDragEnd)
            .on('touchend',        onDragEnd)
            .on('touchendoutside', onDragEnd);

UPDATE:

Ok, I have found this jsFiddle...

And I guess I need to set:
 

renderer.view.style.width  = ...... + 'px';
renderer.view.style.height = ...... + 'px';

 

There is also renderer.resize() but it does not scale my game board...

Thank you for any suggestions
Alex

[labrat.mobi]

I usually modify the CSS property width/height of the render.

 

These resources should be useful!

http://www.williammalone.com/articles/html5-game-scaling/

https://msdn.microsoft.com/en-us/hh969228.aspx?f=255&MSPPError=-2147217396

[Alexander Farber]

Thank you, also I have found the jQuery resizable to work well with PIXI too:

$('#board').resizable({
       aspectRatio: 1020 / (1020 + 60),
       minWidth: 1020 / 2
});