Dynamically resizing pixi stage on window resize.

[GourmetGorilla]

Trying to think through how to dynamically resizing pixi stage on window resize.  I'm using the following the set the size of my stage to the window, it works fine (though it distorts the images, does not keep ratio).

stageWidth = $(window).innerWidth(); stageHeight = $(window).innerHeight();console.log(stageWidth, stageHeight);    // create an new instance of a pixi stage    var stage = new PIXI.Stage(0xff00ff);    var renderer = PIXI.autoDetectRenderer(stageWidth, stageHeight);

But how do I extend this to update the stage size when the browser window is resized?

I tried the following (with a call to onResize inside my animate function) - it may be resizing the stage (i'm not sure), but it's not resizing the content - and I'm getting a warning in the console (WARNING: Too many active WebGL contexts. Oldest context will be lost): 

 

  function onResize(){   $( window ).resize(function(){    stageWidth = $(window).innerWidth();     stageHeight = $(window).innerHeight();    renderer = PIXI.autoDetectRenderer(stageWidth, stageHeight);   })   } 

Maybe I need to be updating the ' document.body.appendChild(renderer.view); ' instead? How would I do that, if in fact that's what I need to do? 
 

[crowbar]

I did it like this:

window.onresize = function (event){    var w = window.innerWidth;    var h = window.innerHeight;    //this part resizes the canvas but keeps ratio the same    renderer.view.style.width = w + "px";    renderer.view.style.height = h + "px";    //this part adjusts the ratio:    renderer.resize(w,h);}

[GourmetGorilla]

Thanks @crowbar that's great! It's working to resize the canvas, but not updating the size of my content - is this updating your content too?