title: Why do I need to make my electron window bigger than my canvas?
body: <p>JS</p>
  
  <pre><code>function createWindow () {
    // Create the browser window.
    mainWindow = new BrowserWindow({width: 450, height: 600,
      'title' : 'Quantum Pilot', 'transparent' : true,
      'web-preferences' : {'allow-displaying-insecure-content' : true}});
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;html&gt;
  &lt;body bgcolor="black"&gt;
  &lt;center&gt;
      &lt;div id="game_container"&gt;
      &lt;/div&gt;
  &lt;/center&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Front JS</p>
  
  <pre><code>generateCanvas() {
      var canvas = document.createElement("canvas");
      Thing.prototype.scale = 1;
      canvas.width = 450 * Thing.prototype.scale;
      canvas.height = 600;
  </code></pre>
  
  <p>When I run my application, scrollbars are present unless I use <code>style="overflow: hidden"</code> in the html <code>body</code>.</p>
  
  <p>I can get rid of the scrollbars by adding 50px to the Electron window. But I'm confused as to why this is happening.</p>
  
  <p>How can I just make a window and the canvas be the same size?</p>