White empty space below Canvas

canvas, css, html

Solution

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/

Problem

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> ```

Original source