Alexander Farber Alexander Farber - 4 months ago 23
Javascript Question

How to fit PIXI renderer into browser width and height?

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.

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);

Answer

Use window.innerWidth and window.innerHeight to make your board element optimal sized.

My solution looks like this (using only raw canvas, no frameworks)

var context = document.getElementById('game');
function gameResize()
    {
    if (window.innerWidth/window.innerHeight > 1280/720)
        {
        context.height = window.innerHeight;
        context.width = 1280*context.height/720;
        }
    else
        {
        context.width = window.innerWidth;
        context.height = 720*context.width/1280;
        }
    }

You can also change board size directly, and with PIXI renderer.resize(), but i am not sure which one is more correct.

Comments