CODEWITHSUNDEEP
javascripthtmlcanvas
Yury
Yury

Reputation: 57

HTML5 multi canvas fullscreen

I am making html5 game. It use several canvases.

<div id="GameContainer" >
<canvas id="MapCanvas" width="1200" height="690" style=" position:absolute;z-index: 1s; ">
Your browser does not support the canvas element.
</canvas>
<canvas id="CellHighLightCanvas"width="1200" height="690" style=" position:absolute;z-index: 2;">
Your browser does not support the canvas element.
</canvas>

<canvas id="UnderUnitCanvas" width="1200" height="690" style="position:absolute;  z-index: 3;">
Your browser does not support the canvas element.
</canvas>

I trying make full screen. I used this method:

if (element.requestFullScreen)
            element.requestFullScreen();
        else if (element.webkitRequestFullScreen)
            element.webkitRequestFullScreen();
        else if (element.mozRequestFullScreen)
            element.mozRequestFullScreen();

Where element is each from canvases(this code inside loop).But it works only for 1 canvas. How can i do this for all canvases?

Upvotes: 0

Views: 1095

Answers (1)

Matt Randell
Matt Randell

Reputation: 384

You can't have more than one element fullscreen at once. Use the parent div:

var element = document.getElementById("GameContainer");

if (element.requestFullScreen)
  element.requestFullScreen();
else if (element.webkitRequestFullScreen)
  element.webkitRequestFullScreen();
else if (element.mozRequestFullScreen)
  element.mozRequestFullScreen();

Upvotes: 1

Related Questions