title: Extra margin in canvas
body: <p>I'm trying to make a canvas that fits perfectly in a square browser. The problem is keep getting this extra margin at the top and left of the screen  and I'm unable to get rid of it. Any idea how I can fix this?</p>
  
  <p><a href="https://i.stack.imgur.com/gqs1H.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gqs1H.png" alt="red arrows"></a></p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
  &lt;/head&gt;
  &lt;style type="text/css"&gt;
  
  #gameCanvas {
      background-color: blue;
  }
  
  &lt;/style&gt;
  
  &lt;canvas id="gameCanvas"&gt;&lt;/canvas&gt;
  &lt;script type="text/javascript"&gt;
      var canvas = document.getElementById("gameCanvas");  
      canvas.width = window.innerWidth;
      canvas.height = window.innerWidth;
  &lt;/script&gt;
  &lt;script src="cocos2d.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>