I just come to a problem that need to create a canvas element the will cover on top of the whole page. This prevented me from using style.width and style.height as the drawing will become scaled by the style setting. So I have to calculate the exact page width and height then assign it to the canvas element.

IE 6 had a handy document.body.scrollWidth and document.body.scrollHeight to check the size of body element. Just one thing to note with document.body.scrollHeight is that If the total height of the content is less than the view port / screen size, you will need to use document.body.clientHeight.

While for Firefox, I just need to go through different properties in the window object and body element to find the correct numbers for the calculation.

width = window.scrollMaxX + document.body.clientWidth;
height = window.scrollMaxY + document.body.clientHeight;

Do not mistaken window.innerWidth and window.innerHeight into above as innerWidth and innerHeight will include the scrollbar (if there aren’t any scrollbar, window.innerWidth will equals to document.body.clientWidth and window.innerHeight will equals to document.body.clientHeight)