How do I create an Electron window the same size as a canvas?

Question

I'm making a game with Phaser 3.
It creates a canvas at the center of the page and displays the game screen in it.

Display the canvas in the Electron window.
At that time, I would like to display the canvas without zooming in or out.

The canvas size is width: 800 px, height: 600 px.

So I wrote the following 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'),
    },
  });

The following window appears.

The orange part is canvas.

When I checked in Developer Tools, width: 800 px, height: 600 px are correct.

However, the size of the was width: 777 px, height: 604 px.

This value differs from the width: 800 px, height: 600 px that I specified when I created the Electron window.

Because of that, the scroll bar is displayed.

Why does Electron generate windows smaller than the size I specified when creating them?

Does anyone know why this happens?

How do I fix the size of to width: 800 px, height: 600 px?

The version of Electron is 9.2.1.

Answer 1

You need to add the useContentSize property set to true to the options of new BrowserWindow():

function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    useContentSize: true,
    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'),
    },
  });

See options of new BrowserWindow():

useContentSize Boolean (optional) - The width and height would be used as web page's size, which means the actual window's size will include window frame's size and be slightly larger. Default is false.