CODEWITHSUNDEEP
javascripthtmlcanvaselectron
quantumpotato
quantumpotato

Reputation: 9767

Why do I need to make my electron window bigger than my canvas?

JS

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}});

HTML

<html>
<body bgcolor="black">
<center>
    <div id="game_container">
    </div>
</center>
</body>

Front JS

generateCanvas() {
    var canvas = document.createElement("canvas");
    Thing.prototype.scale = 1;
    canvas.width = 450 * Thing.prototype.scale;
    canvas.height = 600;

When I run my application, scrollbars are present unless I use style="overflow: hidden" in the html body.

I can get rid of the scrollbars by adding 50px to the Electron window. But I'm confused as to why this is happening.

How can I just make a window and the canvas be the same size?

Upvotes: 3

Views: 3495

Answers (2)

Bear-Foot
Bear-Foot

Reputation: 774

The dimensions you specify in BrowserWindow options are not the dimensions of the body but the dimensions of the window, including the frame.

If you want the inside of your window to match what you specify as options, you should use useContentSize: true

From https://github.com/electron/electron/blob/master/docs/api/browser-window.md#class-browserwindow

Upvotes: 3

martpie
martpie

Reputation: 6120

width and height properties/attributes represents the coordinate space of the canvas, and not the dimensions of the element.

Use <canvas style="width: 450px; height: 600px;"></canvas> instead to specify the dimensions of your canvas.

Or more simply, if you want it fullscreen: <canvas style="width: 100vw; height: 100vh;"></canvas>

Check if <body> or <html> has no padding or margin too.

See canvas attributes documentation

Upvotes: 0

Related Questions