I'm creating a JavaScript canvas game. My logic include whether a sprite has went to the bottom of the browser window (as the canvas is 100% width & 100% height).

Thus, it can be quite confusing if the browsers' height keeps changing, as I'm not sure what's the intended behaviour if a sprite that has already go to the bottom is exposed by resizing the window to a larger height.

I think my options are:

1. refer the width & height of browser without resizing, OR
2. When client resize the browser mid game, there should be a "Please resize browser back to the initial size" and a button to do so (as resizing to a specific size can be quite hard)

I think option 2 isn't feasible as it is not supported by Chrome & Opera since its easy to abuse the resize functionality.

For number 1, I haven't find if there is any property that supports this. I tried:

console.log("width ", document.documentElement.clientWidth);
console.log("height ", document.documentElement.clientHeight);

window.onresize = function() {
  console.log("width ", document.documentElement.clientWidth);
  console.log("height ", document.documentElement.clientHeight);
}

I also tried document.innerWidth & innerHeight but it is still not the true browser's width & height. It is the width & height after resizing OR width & height after reduced with chrome dev tool's width & height. Is there any way I can accomplish this?

Thanks