Fullscreen canvas in javascript?...
17 May 2016 16:15
This is correct?:
in html:
in load_cb this:
in css:
But in firefox when make fullscreen is not centered the canvas…
Any advice?, Thanks.
:S
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
I tried it with this:
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)
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
The problem with firefox and fullscreen is when you use:
with m_cfg.P_HIGH, work fine.
my solution:
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
};