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 }

Answer 3

Here's a one-line if clause that will work cross-browser:

if (!document.isFullScreen && !document.fullscreenElement && !document.webkitFullscreenElement && !document.mozFullScreenElement && !document.msFullscreenElement) {
     .... do something
}

This checks to see if you're currently in full-screen mode across Chrome, Opera, Firefox, IE11 and Edge. All of the HTML5 full screen stuff isn't currently standard cross browser, so we need to check for the existence of various different prefixes in the if clause. Here's the documentation to show what different prefixes need to be used across different browsers:

https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#Prefixing

Note - to check whether or not you're in full screen, you always need to check the full screen property of the document element (as I've shown in the example) - it's not a property of the element that is full screen.

Answer 4

Kaaido's answer didn't quite work for me in Chrome, but I liked the approach. Updated code comes out to:

 if (typeof(document.isFullscreen === undefined)) { document.isFullscreen = function() { return !((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)); } } 

Answer 5

I have just merged Samuel Mungy's answer and Kaiido's answer and add some readibility.

 if (document.isFullscreen === undefined) {

    var fs = function () {
      if(document.fullscreenElement !== undefined) return document.fullscreenElement;
      if(document.webkitFullscreenElement !== undefined) return document.webkitFullscreenElement;
      if(document.mozFullScreenElement !== undefined) return document.mozFullScreenElement;
      if(document.msFullscreenElement !== undefined) return document.msFullscreenElement;
    }
    if (fs() === undefined) document.isFullscreen = undefined;
    else document.isFullscreen = fs;
  }

Question specific part: I assume that

canvas = document.getElementById("myCanvas");

so you can use this snippet

if(document.isFullscreen !== undefined && document.isFullscreen().getAttribute("id") !== null){

  if(document.isFullscreen().getAttribute("id") === "myCanvas"){
    //your canvas is fullscrren now

  }else{
    //your canvas is not fullscreen now

  }

}