How to detect if user has enabled full screen in browser

Question

Is there some JavaScript event fired when user enables full screen in Chrome or FireFox?

I have WebGL application with canvas width and height set to a certain size and I would like to resize that among other things when user enables full screen. If there isn't such event, should I start researching ways to fill the browser window with canvas all though it complicates things while debugging?

Answer 1

You can compare the sreen width to the browser width, or height.

if (screen.width == window.innerWidth && screen.height == window.innerHeight) {
    //full web browser
}

EDIT : Be carefull in chrome if user have download manager, translate bar or element inspercter open the height is different to the sreen.

Answer 2

You can use document.mozFullScreen and document.webkitIsFullScreen as below:

if ((!document.mozFullScreen && !document.webkitIsFullScreen)) {
   //FullScreen is disabled
} else {
   //FullScreen is enabled
}