Fullscreen scaling ignores canvas ratio

[abergmeier]

When a canvas with a ratio 4:3 is created and then the canvas element is taken fullscreen, the canvas may be incorrectly scaled e.g. on a 16:10 display.

It would perhaps be better to get the screen size and calculate the necessary margins to keep the aspect ratio of the canvas.

[kripken]

On which browser did you see this? Last I heard chrome scaled differently than the spec said to.

[abergmeier]

Sorry, it was actually Firefox in the latest beta.

[DerKoun]

I have written a bit of JavaScript that fixes full screen for both Firefox (right AR) and Chrome (actually increased size).
To try it out just wrap it into a script track and add that at the end of the head tag of the Emscripten generated HTML.
The commented out part at the beginning is only necessary if the aspect ration of the canvas is not correct in the first place, e.g. on certain emulators. (not a bug of the emulator, but part of how some old systems work)
I hope this can be added to the Emscripten HTML template, because correct full screen would improve the experience a lot.
In this case the last 5 lines should be removed and the parent element of the canvas should be used for requestFullScreen in any case.

window.onload = function() {
    // // ensure correct 4:3 aspect ratio (height 480 instead of 400) and increase size if browser view port is large enough
    // var cs = document.createElement("Style");
    // cs.appendChild(document.createTextNode(window.innerHeight < 850 ? "#canvas { width: 640px; height: 480px }" : "#canvas { width: 800px; height: 600px }"));
    // document.head.appendChild(cs);

    // ensure correct full screen size and aspect ratio
    var canEl = document.getElementById("canvas");
    var reqFuncName = (canEl.mozRequestFullScreen || canEl.webkitRequestFullScreen || {"name": "requestFullScreen"}).name;
    document.addEventListener(reqFuncName.slice(0, -"requestFullScreen".length) + "fullscreenchange", function (evt) {
        if(document.mozFullScreen || document.webkitIsFullScreen || document.fullScreen || document.isFullScreen) {
            var w = canEl.clientWidth;
            var h = canEl.clientHeight;
            var factor = Math.min(screen.width / w, screen.height / h);
            canEl.setAttribute("style", "width: " + Math.round(w * factor) + "px !important; height: " + Math.round(h * factor) + "px !important;");
        } else {
            canEl.removeAttribute("style");
        }
    }, false);
    // in Firefox full screen must be set to the parent of the canvas to allow resizing the canvas for correct aspect ratio
    if(reqFuncName == "mozRequestFullScreen") {
        canEl[reqFuncName] = function() { 
            this.parentNode[reqFuncName].apply(this.parentNode, arguments);
        };
    }
}

[kripken]

Sounds very useful! Can you please open a pull request with that?

[DerKoun]

I'm still working on some improvements of the code and on more direct integration into the Emscripten JavaScript template. So it will take a view more days. Then I will prepare the pull request (My first ever, so i hope i get it right).

[DerKoun]

Question:
part of what I'm adding is the ability to set an optional forced aspect ratio (e.g. 4:3 for emulators). While implementing this is not difficult, I currently can only set that ratio by manually editing the JavaScript file (after compilation is already done).
So I'm wondering if Emcripten, SDL or some other part has a setting for such an output aspect ratio that differs from the pixel aspect ratio of the canvas. This should ideally be settable in the input code that is compiled to JS (and it of course my code already defaults to not overriding the AR).
I'd appreciate any input on what I can read from the default JavaScript objects that might help me with this.

[juj]

Is there a reason to ever use an output aspect ratio that's different than
the pixel aspect ratio of the render target?

2014-02-21 1:17 GMT+02:00 DerKoun notifications@github.com:

Question:
part of what I'm adding is the ability to set an optional forced aspect
ratio (e.g. 4:3 for emulators). While implementing this is not difficult, I
currently can only set that ratio by manually editing the JavaScript file
(after compilation is already done).
So I'm wondering if Emcripten, SDL or some other part has a setting for
such an output aspect ratio that differs from the pixel aspect ratio of the
canvas. This should ideally be settable in the input code that is compiled
to JS (and it of course my code already defaults to not overriding the AR).
I'd appreciate any input on what I can read from the default JavaScript
objects that might help me with this.

Reply to this email directly or view it on GitHubhttps://github.com//issues/2053#issuecomment-35681503
.

[DerKoun]

Dosbox for example outputs resolutions like 320x200 that need to be corrected to 4:3 (320x240).

[DerKoun]

opened pull request:
#2155
Full screen fixes (aspect ratio & IE11) and aspect ratio option #2155

[DerKoun]

The pull request has been merged. So I think this issue is solved.

@abergmeier can you please confirm if this covers your issue completely?

[abergmeier]

@DerKoun I am finally on incoming now and hate to burst your bubble, but fullscreen does not work at all anymore. It currently only complains (in console) about the element being removed from the document.

[DerKoun]

@abergmeier Could you please copy the error messages from the browsers here? I'll look into it as soon as I can.

[abergmeier]

@DerKoun The element is made fullscreen for the blink of an eye and then reverts. The error message is "Exited full-screen because full-screen element was removed from document." in Firefox. Chrome has the same behavior minus the error message.

[DerKoun]

@abergmeier Can't put my finger on that one.
(EDIT) Been able to reproduce the issue here. Looking into it.
(EDIT) Got it, see pull request #2190