title: Dynamically resize the pixi stage and it's contents on window resize and window load
body: <p>I'm trying to dynamically resize the pixi stage (canvas and contents) on window resize.  And also have it initially load at the size of the browser window without changing ratio.</p>
  <p>I'm using the following to set the initial size basically to <code>window.innerWidth</code> &amp; <code>window.innerHeight</code>.</p>
  <p>But it's doing something strange, it's loading at a smaller size (but not the size of the canvas specified in the html) then it's expanding to fit the window.</p>
  <pre><code>var w;
  var h;
      
  window.onload = function() {
      var w = window.innerWidth;
      var h = window.innerHeight;
  
      //this part resizes the canvas but keeps ratio the same
      renderer.view.style.width = w + &quot;px&quot;;
      renderer.view.style.height = h + &quot;px&quot;
  
  //  init();
  }; 
  </code></pre>
  <p>Here's my onresize function - it's resizing the canvas, but not the content.</p>
  <p>I thought being that it's updating the <code>renderer.view</code>, it would resize the content, but it's not doing so.</p>
  <p>How do I resize the content of the <code>stage/renderer.view</code> content?</p>
  <pre><code>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 + &quot;px&quot;;
      renderer.view.style.height = h + &quot;px&quot;;
  
      //this part adjusts the ratio:
      renderer.resize(w,h);
  }
  
      // create an new instance of a pixi stage
      var stage = new PIXI.Stage(0xff00ff);
      var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
  
      // add the renderer view element to the DOM
     var mypixiStage = document.body.appendChild(renderer.view);
  </code></pre>