title: Three.js: Resize rendering canvas (GPU hungry fragment shader)
body: <p>I am running resource hungry fragment shader with three.js. I have setup rendering size to 800 * 600 to keep shader running smooth even on lowend cards. </p>
  
  <p>I am setting my rendering canvas like this: </p>
  
  <pre><code>var canvas1 = document.getElementById('canvas1') ;
  renderer = new THREE.WebGLRenderer(canvas1);
  renderer.setSize( 800, 600 );
  renderer.autoClear = false;
  document.body.appendChild( renderer.domElement );
  </code></pre>
  
  <p>On body element i have</p>
  
  <pre><code>&lt;canvas id='canvas1' style=" position: absolute; left: 0; top: 0; z-index: -10; background-color: #000000; "&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>I am then in css header doing width: 100%; height: 100%;</p>
  
  <p>This does not help much, as Three.js creates new canvas of size 800*600 on top of canvas1.
  What is best approach to zoom Three.js rendering canvas to match web browsers window size, without touching rendering size?</p>