javascript - Dynamically resize the pixi stage and it's contents on window resize and window load -

i'm trying dynamically resize pixi stage (canvas , contents) on window resize. , have load @ size of browser window without changing ratio.

i'm using following set initial size window.innerwidth & window.innerheight - it's doing strange, it's loading @ smaller size (but not size of canvas specified in html) it's expanding fit window.

var w; var h;  window.onload = function() {     var w = window.innerwidth;     var h = window.innerheight;      //this part resizes canvas keeps ratio same     renderer.view.style.width = w + "px";     renderer.view.style.height = h + "px"  //  init(); };  

here's onresize function - it's resizing canvas, not content. thought being it's updating renderer.view, resize content, it's not doing - how resize content of stage/renderer.view content?

window.onresize = function (event){     var w = window.innerwidth;     var h = window.innerheight;      //this part resizes canvas keeps ratio same     renderer.view.style.width = w + "px";     renderer.view.style.height = h + "px";      //this part adjusts ratio:     renderer.resize(w,h); }      // create new instance of pixi stage     var stage = new pixi.stage(0xff00ff);     var renderer = pixi.autodetectrenderer(window.innerwidth, window.innerheight);      // add renderer view element dom    var mypixistage = document.body.appendchild(renderer.view); 

you want setup size , ratio resize event function reference. then, you'll need resize function checks window size in order keep ratio when resized. i'm running resize function manually start initial page load.

also, note i'm not running renderer.resize. i'm resizing drawing area.

here's fiddle at: http://jsfiddle.net/2wjw043f/

here's fiddle code:

var size = [1920, 1080]; var ratio = size[0] / size[1]; var stage = new pixi.stage(0x333333, true); var renderer = pixi.autodetectrenderer(size[0], size[1], null); document.body.appendchild(renderer.view); var texture = new pixi.rendertexture(); r1 = new pixi.graphics(); r1.beginfill(0x00ffff); r1.drawrect(0, 0, 100, 100); r1.endfill(); texture.render(r1); var block = new pixi.sprite(texture); block.position.x = 100; block.position.y = 100; block.anchor.x = .5; block.anchor.y = .5; stage.addchild(block); requestanimframe(animate); resize(); function animate() {     requestanimframe(animate);     block.rotation += .01;     renderer.render(stage); } function resize() {     if (window.innerwidth / window.innerheight >= ratio) {         var w = window.innerheight * ratio;         var h = window.innerheight;     } else {         var w = window.innerwidth;         var h = window.innerwidth / ratio;     }     renderer.view.style.width = w + 'px';     renderer.view.style.height = h + 'px'; } window.onresize = resize;