Forum

Fullscreen canvas in javascript?...

17 May 2016 16:15 #9574
This is correct?:

in html:
<i id="fs" class="fa fa-expand" aria-hidden="true"></i>


in load_cb this:
// fullscreen
    var fsb = document.getElementById('fs');
    function toggleFullScreen() {
      if ((document.fullScreenElement && document.fullScreenElement !== null) ||
       (!document.mozFullScreen && !document.webkitIsFullScreen)) {
        if (document.documentElement.requestFullScreen) {
          document.documentElement.requestFullScreen();
        } else if (document.documentElement.mozRequestFullScreen) {
          document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullScreen) {
          document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        }
        $('#fs').removeClass( 'fa fa-expand' );
        $('#fs').addClass('fa fa-object-ungroup');
      } else {
        if (document.cancelFullScreen) {
          document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        }
        $('#fs').removeClass( 'fa fa-object-ungroup' );
        $('#fs').addClass('fa fa-expand');
      }
    }
    fsb.addEventListener("click",toggleFullScreen);
    //end fullscreen


in css:
#fs {
cursor: pointer;
position: absolute;
font-size: 20px;
z-index: 100;
color: white;
bottom: 4px;
right: 5px;
opacity: 1;
text-shadow: 2px 1px 1px rgba(0, 0, 0, 0.6);
width: 20px;
padding: 10px;
}


But in firefox when make fullscreen is not centered the canvas…
Any advice?, Thanks.

:S
17 May 2016 17:59 #9576
I tried it with this:
var fsb = document.getElementById('fs');
    var elem = document.getElementById("main_canvas_container");
    function toggleFullScreen(){
        m_app.request_fullscreen(elem);
    }
    fsb.addEventListener("click",toggleFullScreen);


but put screen black.
and get these errors:
B4W ERROR: Slink texture "DEPTH_TEX" has unsupported size: 5120x2168. Max available: 4096x4096.
B4W ERROR: Slink texture "COLOR" has unsupported size: 5120x2168. Max available: 4096x4096.
B4W ERROR: Slink texture "DEPTH_TEX" has unsupported size: 5120x2168. Max available: 4096x4096.
Error: WebGL: texImage2D: Requested size at this level is unsupported. textures.js:357:9
Error: WebGL: drawElements: Drawing to a destination rect smaller than the viewport rect. (This warning will only be given once)
17 May 2016 18:28 #9577
The problem with firefox and fullscreen is when you use:
var quality = m_cfg.P_ULTRA;

with m_cfg.P_HIGH, work fine.

my solution:
var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
if (is_firefox){ // with firefox and fullscreen get problems in ultra quality
            var quality = m_cfg.P_HIGH; // quality 2
        } else {
            var quality = m_cfg.P_ULTRA; // quality 3
        };
 
Please register or log in to leave a reply.