title: Canvas not sizing to window inner width & height
body: <p>According to documentation for Javascript's window.innerWidth and window.innerHeight properties, both are calculated without toolbars and scroll bars.  However, when I try to set a div element and a canvas element to be the same size as the window, both elements have excess on their width and the height properties.  How do I go about fixing this?</p>
  
  <p><a href="http://codepen.io/RobbyT15/pen/PGmWQx" rel="nofollow">Pen</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="gameScreen"&gt;
          &lt;canvas id="basemap"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>html, body{
      margin: 0;
      padding: 0;
  }
  
  #gameScreen{
      margin: 0;
      padding: 0;
      border: 1px solid black;
  }
  
  #basemap{
      margin: 0;
      padding: 0;
      background-color: red;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>function sizePage(){
      var gameScreen = document.getElementById("gameScreen");
      var basemap = document.getElementById("basemap");
      var canvasWidth = window.innerWidth;
      var cnavasHeight = window.innerHeight;
      gameScreen.style.width = canvasWidth +"px";
      gameScreen.style.height = cnavasHeight +"px";
      basemap.width = canvasWidth;
      basemap.height = cnavasHeight;
  }
  sizePage();
  
  window.addEventListener("resize", function(){
      sizePage();
  })
  </code></pre>