Canvas not sizing to window inner width & height

Question

According to documentation for Javascript's window.innerWidth and window.innerHeight properties, both are calculated without toolbars and scroll bars. However, when I try to set a div element and a canvas element to be the same size as the window, both elements have excess on their width and the height properties. How do I go about fixing this?

Pen

HTML

<body>
    <div id="gameScreen">
        <canvas id="basemap"></canvas>
    </div>
</body>

CSS

html, body{
    margin: 0;
    padding: 0;
}

#gameScreen{
    margin: 0;
    padding: 0;
    border: 1px solid black;
}

#basemap{
    margin: 0;
    padding: 0;
    background-color: red;
}

JS

function sizePage(){
    var gameScreen = document.getElementById("gameScreen");
    var basemap = document.getElementById("basemap");
    var canvasWidth = window.innerWidth;
    var cnavasHeight = window.innerHeight;
    gameScreen.style.width = canvasWidth +"px";
    gameScreen.style.height = cnavasHeight +"px";
    basemap.width = canvasWidth;
    basemap.height = cnavasHeight;
}
sizePage();

window.addEventListener("resize", function(){
    sizePage();
})

Seems to work fine for me. When you say they are in `both elements have excess on their width and the height properties`, how much bigger are they? — phreakv6, Sep 26 '16 at 15:05
@phreakv6 the width appears to be just 2px wider than the screen, or the scrollbar width. So that's easy enough to fix. The height appears to be much larger, however, probably the toolbar height. I'm trying to figure out by how much. My confusion, though, is that the height and width should not be including either tool or scroll bar dimensions. — Robert, Sep 26 '16 at 15:08
I see. On Chrome/Safari on OS X, the scrollbar appears only if required and it does appear on top of the canvas. I have noticed this to be the behavior when using `document.body.scrollWidth` and `document.body.clientWidth` as well but you can try if that works for you. — phreakv6, Sep 26 '16 at 15:15
@phreakv6 would it be better to disable the scrollbar entirely or just subtract the scrollbar width? — Robert, Sep 26 '16 at 15:18
If its going to be a single page app with only the canvas filling the screen, I guess it makes sense to disable the scrollbar. Otherwise you can check this for getting scrollbar width. Doesn't look like it works on OS X still. http://stackoverflow.com/questions/13382516/getting-scroll-bar-width-using-javascript — phreakv6, Sep 26 '16 at 15:22
Looks like you might need to account for the border you're putting on the canvas. Here is a mock-up of this, taking the 1px border into account: http://codepen.io/anon/pen/YGVkNB Might not be correct, but may help :) — The Gav Lad, Sep 26 '16 at 15:30

omar · Answer 1 · 2021-04-11T05:27:47.940

I did some try and error process and this seems to work:

first do some css to set the body to full screen:
(if you want to add more html stuff uder the canvas use a div insted of body)

body {
        margin: 0;
        height: 100vh;
        width: 100vw;
    }

canvas {
    /* setting display to block is really important*/
    display: block;
}

now javascript to resize the canvas to that fullscreen body:

canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;

optional optimization:
as now for the cherry on the top add a responsive meta tag in the <head></head>

<!--this is optional-->
<meta name="viewport" content="width=device-width, initial-scale=1">

Canvas not sizing to window inner width & height

1 Answers1