setting canvas size to fill the body is adding scrollbars to the window

Question

I am trying to set the width/height of a canvas element to fill the container it is in. Currently it works, but when it fills the body, scrollbars are added.

let masterCanvas = document.querySelector('canvas');
let parent = masterCanvas.parentElement;
masterCanvas.width = parent.offsetWidth;
masterCanvas.height = parent.offsetHeight;

I have the following styles:

<style>
    body, html { padding: 0; margin: 0; width: 100vw; height: 100vh; }
    * { box-sizing: border-box; }
</style>

And the following body:

<body>
    <canvas></canvas>
</body>

Here is a fiddle that demonstrates this: https://jsfiddle.net/ynkcfsud/

score 1 · Accepted Answer · answered Feb 23 '17 at 18:20

1

The canvas element behaves like an image, so it is an inline element. You'll need to apply display: block to the canvas.

answered Feb 23 '17 at 18:20

Domino

6,314
1
32
58

PS: it took me some time to catch this one :) – Domino Feb 23 '17 at 18:23
That was it! I didn't know that something like that would cause this. Thanks! – Get Off My Lawn Feb 23 '17 at 18:49

setting canvas size to fill the body is adding scrollbars to the window

1 Answers1

Linked