White empty space below Canvas

Question

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>

Answer 1

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/