title: How do I create an Electron window the same size as a canvas?
body: <p>I'm making a game with Phaser 3.<br />
  It creates a canvas at the center of the page and displays the game screen in it.</p>
  <p>Display the canvas in the Electron window.<br />
  At that time, I would like to display the canvas without zooming in or out.</p>
  <p>The canvas size is width: 800 px, height: 600 px.</p>
  <br>
   
  So I wrote the following code:.
  <pre class="lang-js prettyprint-override"><code>function createWindow() {
    // Create the browser window.
    win = new BrowserWindow({
      width: 800,
      height: 600,
      resizable: false,
      webPreferences: {
        // Use pluginOptions.nodeIntegration, leave this alone
        // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
        nodeIntegration: (process.env.ELECTRON_NODE_INTEGRATION as unknown) as boolean,
        preload: path.join(__dirname, 'preload.js'),
      },
    });
  </code></pre>
  <p>The following window appears.</p>
  <p><img src="https://i.stack.imgur.com/oYMHd.png" alt="screen" /></p>
  <p>The orange part is canvas.</p>
  <p>When I checked in Developer Tools, width: 800 px, height: 600 px are correct.</p>
  <p>However, the size of the  was width: 777 px, height: 604 px.</p>
  <p>This value differs from the width: 800 px, height: 600 px that I specified when I created the Electron window.</p>
  <p>Because of that, the scroll bar is displayed.</p>
  <br>
  <p>Why does Electron generate windows smaller than the size I specified when creating them?</p>
  <p>Does anyone know why this happens?</p>
  <p>How do I fix the size of  to width: 800 px, height: 600 px?</p>
  <p>The version of Electron is 9.2.1.</p>