White empty space below the canvas

Question

After we spent hours with codes, I had a problem. I created a gray HTML canvas that would fill the entire screen, and it worked. But even though the canvas should be the only visible object on the screen, a small white blank space still appears at the bottom of the page as I scroll down. I already know that this has nothing to do with the body, because I already tried to change the color to gray.

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>

Answer 1

Add a display block to the canvas element. By default, canvas is an inline element, and this is the usual behavior for them:

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

: http://jsfiddle.net/LvSxN/

display: block, , .

, javascript. CSS :

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

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