title: Get Canvas to dynamically resize when browser window is resized
body: <p>I've got a canvas set up on my webpage with a js animation running in it that fills the entire browser window but when I resize the window I can't seem to get the canvas to resize automatically to fit the new window size. Can someone tell me what I need to add to my js to get this function properly? Thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById('canvas');
  var makecodeplay = canvas.getContext('2d');
  canvas.width=window.innerWidth;
  canvas.height=window.innerHeight;
  
  makecodeplay.clearRect(0, 0, canvas.width, canvas.height);
  makecodeplay.fillStyle = "rgb(75,77,81)";
  makecodeplay.fillRect(0, 0, canvas.width, canvas.height);
  
  function randomPaint(inX, inY) {
     
      var x = Math.floor(Math.random() * canvas.width);
      var y = Math.floor(Math.random() * canvas.height);
      var r, g, b;
      r = Math.floor(Math.random() * 255);
      g = Math.floor(Math.random() * 255);
      b = Math.floor(Math.random() * 255);
      makecodeplay.beginPath();
      makecodeplay.fillStyle = "rgba(35,37,41,0.3)";
      makecodeplay.fillRect(0, 0, canvas.width, canvas.height);
      makecodeplay.fill();
      makecodeplay.closePath();
  
      makecodeplay.beginPath();
      makecodeplay.strokeStyle = "rgba(" + r + "," + g + "," + b + ",0.1)";
      makecodeplay.lineWidth = 10;
      makecodeplay.moveTo(inX, inY);
      makecodeplay.lineTo(x, y);
      makecodeplay.stroke();
      makecodeplay.closePath();
  
      makecodeplay.beginPath();
      makecodeplay.strokeStyle = "rgba(" + r + "," + g + "," + b + ",0.1)";
      makecodeplay.lineWidth = 4;
      makecodeplay.moveTo(inX, inY);
      makecodeplay.lineTo(x, y);
      makecodeplay.stroke();
      makecodeplay.closePath();
  
      makecodeplay.beginPath();
      makecodeplay.strokeStyle = "rgb(" + r + "," + g + "," + b + ")";
      makecodeplay.lineWidth = 1;
      makecodeplay.moveTo(inX, inY);
      makecodeplay.lineTo(x, y);
      makecodeplay.stroke();
      makecodeplay.closePath();
       
    setTimeout(function () {
          randomPaint(x, y)
      }, 100);
  }
  
  randomPaint(1, 1);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>        
  
  html, body { 
   margin: 0; 
   padding: 0;
   width:  100%;
   height: 100%;
  }
  
  html {
   background-color: "#555761";
   background: "#555761";
  }
  
  body {
   font-family: "brandon-grotesque";
   font-wieght: 100;
   font-style: normal;
   color: #656771;
   bgcolor: "#555761";
  }
  
  p {
   font-family: "brandon-grotesque";
   font-wieght: 100;
   font-style: normal;
   color: #656771;
  }
  
  a {
   color: #555761;
  }
  
  a:link {
   color: #555761;
   text-decoration: none;
  }
  
  a:visited {
   color: #555761;
   text-decoration: none;
  }
  
  a:hover {
   color: #656771;
   text-decoration: none;
  }
  
  a:active {
   color: #555761;
   text-decoration: none;
  }
  
  /* Auto center content in window */
  #stage {
   width:100%; 
   margin: 0 auto;
   padding: 0;
   } 
  
  #stage canvas, #overlay {
   position: absolute;
   margin: 0 auto;
   padding: 0;
   }
  
  #overlay {
   margin: 0 auto;
   padding: 0;
  }
  
  #overlay p {
   color: #333;
   font-family: "museo-sans";
   font-weight: 900;
   font-style: normal;
   font-size: 14px;
  }
  
  .centered {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   }
  
  .centered-bottom {
   position: fixed;
   bottom: 3%;
   left: 50%;
   transform: translate(-50%, -0%);
   -webkit-transform: translate(-50%, -50%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;!--[if lt IE 7]&gt;      &lt;html class="no-js lt-ie9 lt-ie8 lt-ie7"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 7]&gt;         &lt;html class="no-js lt-ie9 lt-ie8"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 8]&gt;         &lt;html class="no-js lt-ie9"&gt; &lt;![endif]--&gt;
  &lt;!--[if gt IE 8]&gt;&lt;!--&gt; &lt;html class="no-js"&gt; &lt;!--&lt;![endif]--&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;title&gt;MAKECODEPLAY&lt;/title&gt;
          &lt;meta name="description" content=""&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
    &lt;script src="//use.typekit.net/uwk8rac.js"&gt;&lt;/script&gt;
    &lt;script&gt;try{Typekit.load({ async: true });}catch(e){}&lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
          
          &lt;div id="stage"&gt;
     &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
     &lt;div class="centered"&gt;
      &lt;img src="img/makecodeplay-logo.png" alt="MAKECODEPLAY" height="70" width="771"&gt;&lt;/div&gt;
     &lt;div class="centered" style="margin-top:50px;"&gt;
      &lt;p&gt;SITE COMING SOON&lt;/p&gt;&lt;/div&gt;
       &lt;div class="centered-bottom"&gt;
        &lt;footer&gt;
        &lt;small&gt;&amp;copy; Copyright 2015, MAKECODEPLAY&lt;/small&gt;
      &lt;/footer&gt;
     &lt;/div&gt;
    &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>