How can I check if an element is in fullscreen with the fullscreen API for HTML5

Question

The question is pretty much in the title. I want to return a value that tells me whether or not the element in question is in fullscreen. How do I do that using javascript? This seems to not work:

function fs_status()
{
var fullscreenElement = canvas.fullscreenElement ||canvas.mozFullscreenElement || canvas.webkitFullscreenElement;
return fullscreenElement;
}

//Sorry, I don't really understand js. So if your making an example can you please use 'canvas' as the element in question.

Answer 1

I found out how to do it after playing around a little:

function fs_status() {
    if (document.fullscreenElement || document.webkitFullscreenElement ||
        document.mozFullScreenElement)
            return 1;
    else
            return -1;
}

Answer 2

Sadly, Fullscreen API still is a mess when you try to work on different browsers.
Webkit browsers and Firefox do include a isFullscreen property to the document, but not IE. But, you can use a workaround looking for msFullscreenElement which might be set to undefined if no fullscreen was requested.

Here is kinda polyfill you can use :

if (typeof(document.isFullscreen === undefined)) {
  document.isFullscreen = function() {
    return document.webkitIsFullscreen || //Webkit browsers
           document.mozFullScreen || // Firefox
           document.msFullscreenElement !== undefined; // IE
  };
}

Didn't tested it on IE but it should work.

Note : call it like that : if( document.isFullscreen() ){ fullscreenOn }else{ fullscreenOff }