0

I am trying to go full screen with my canvas which have 3 layers. However whenever i use mozrequestfullscreen method it only works on one layer (because it takes one parameter). I just wanted to ask is there a way of going full screen with all the layers using mozrequestfullscreen function?

//CSS  
  #canvas-container {
  width: 100%;
  text-align:center;
  margin:auto;
  }
div.fullscreen:-webkit-full-screen {
width: 100%;
height: 100%;
}
div.fullscreen:-moz-full-screen {

width: 100%;
height: 100%;
}
//HTML
   <div id="canvas-container">
                <div class="fullscreen">
                    <canvas id="layer1" width="800" height="500"
                            style="position: absolute; z-index: 0; border:3px solid #EE6D00; "></canvas>
                    <canvas id="layer2" width="800" height="500"
                            style="position: absolute; z-index: 1; border:3px solid #EE6D00; "></canvas>
                    <canvas id="layer3" width="800" height="500"
                            style="position: relative;  z-index: 2; border:3px solid #EE6D00; "></canvas>
                </div>
   </div>
<button class="button" onclick="goFullscreen(); return false">max</button>
//JavaScript
var cn = document.getElementsByClassName("fullscreen");
function goFullscreen() {
        // Get the element that we want to take into fullscreen mode

        // These function will not exist in the browsers that don't support fullscreen mode yet,
        // so we'll have to check to see if they're available before calling them.

        if (cn.mozRequestFullScreen) {
            // This is how to go into fullscren mode in Firefox
            // Note the "moz" prefix, which is short for Mozilla.
            cn.mozRequestFullScreen();

        } else if (cn.webkitRequestFullScreen) {
            // This is how to go into fullscreen mode in Chrome and Safari
            // Both of those browsers are based on the Webkit project, hence the same prefix.
            cn.webkitRequestFullScreen();

        }

    }
New_Coder
  • 21
  • 5
  • You're trying to call `mozRequestFullScreen`/`webkitRequestFullScreen` on an `HTMLCollection`, not on an element, because `getElementsByClassName` returns an `HTMLCollection` (that's why it's "get element**s** by class name"). You only have one `.fullscreen` element, perhaps you wanted `document.getElementsByClassName("fullscreen")[0]` or `document.querySelector(".fullscreen")`? – T.J. Crowder May 25 '16 at 14:48
  • It works if you fix the `HTMLCollection` issue, so closed as a duplicate. – T.J. Crowder May 25 '16 at 14:54

0 Answers0