CODEWITHSUNDEEP
htmlcsscanvas
William Lew
William Lew

Reputation: 485

White empty space below Canvas

After spending hours fiddling with code, I got a problem. I created a grey HTML canvas that would fill up the whole screen, and it worked. But even though the canvas should be the only visible object on the screen, there still seems to be a small white empty space on the bottom of the page when I scroll down. I already know it's nothing to do with the body because I already tried changing the color to grey.

Here is my code:

Head:

<style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }

    canvas {
        background-color: #1A1A1A;
    }
</style>

Body:

<canvas onload="init();" id="canvas"></canvas>
<script>
    var size = {
        width: window.innerWidth || document.body.clientWidth,
        height: window.innerHeight || document.body.clientHeight
    }
    canvas.height = size.height;
    canvas.width = size.width;
</script>

Upvotes: 13

Views: 6117

Answers (1)

dfsq
dfsq

Reputation: 193271

Add display block to the canvas element. Be default canvas is inline element and this is usual behavior for them:

canvas {
    background-color: #1A1A1A;
    display: block;
}

Demo: http://jsfiddle.net/LvSxN/

Try commenting out display: block to see how it changes everything.

Moreover you don't need javascript for this. CSS should be enough:

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
canvas {
    background-color: #1A1A1A;
    display: block;
    width: 100%;
    height: 100%;
}

Demo: http://jsfiddle.net/LvSxN/1/

Upvotes: 29

Related Questions