How can I remove the extra height of html5 canvas?

Question

I was testing html5 canvas element, and wish my canvas to be full screen in the display area. But I found if I set the canvas height to window.innerHeight, the scroll bar wi

Answer 1

By default canvas, unlike div, is display: inline; so it gets set to vertical-align: baseline;. You can take either of the following approaches to make things naturally fill the window.innerHeight:

#canvas {
    background-color: blue;
    vertical-align: top;
}

Or:

#canvas {
    background-color: blue;
    display: block;
}