Pixi.jsで全画面表示

こんな感じのコードがあった時

var STAGE_WIDTH = 400;
var STAGE_HEIGHT = 300;

var stage = new PIXI.Stage(0x66FF99);
var renderer = PIXI.autoDetectRenderer(STAGE_WIDTH, STAGE_HEIGHT);

document.body.appendChild(renderer.view);

requestAnimFrame(update);

function update() {
    requestAnimFrame(update);
    renderer.render(stage);
}

jQueryを使った場合、こんな感じに書ける

var $window = $(window);
 
// XXX: debounce
$window.resize(onResize);
 
function onResize() {
    var width;
    var height;
    var ratioWidth;
    var ratioHeight;
    var ratio;
    
    width = $window.width();
    height = $window.height();
    ratioWidth = width / STAGE_WIDTH;
    ratioHeight = height / STAGE_HEIGHT;
    if (ratioWidth < ratioHeight) {
        ratio = ratioWidth;
    } else {
        ratio = ratioHeight;
    }
    
    renderer.view.style.width = ~~(STAGE_WIDTH * ratio) + 'px';
    renderer.view.style.height = ~~(STAGE_HEIGHT * ratio) + 'px';
}

以上です。