Doctype Affects Width And Height Of Html/body/canvas

I've got a very simple HTML file with a canvas. I've implemented a resizeToWindow function so if the user resizes the browser window, the canvas resizes with it. However, I was get

Solution 1:

Ah interesting. It seems that the <canvas> element has, by default display:inline, like the <img> element which I suppose makes sense. This means that it is placed on the baseline of its containing block, so the white space at the bottom that you see is the gap between the baseline and the bottom of the containing block.

This only happens in full standards mode, so that's why removing the doctype removes the white space, In almost standards mode and quirks mode, the canvas element is placed at the bottom of the containing block.

The standard fixes for this resolve the problem. Use either:

canvas { vertical-align:bottom; }

or

canvas { display:block; } 

and the white space and scrollbar will be gone.