HTML5 Canvas click image (button) to toggle fullscreen

[Hans_Kroll]

Hello,

I'm trying to find a way to to simply click an image (which is a button) to toggle the whole project (and every successive image as well) in fullscreen mode, for cross-webbrowser. I also like to force it in landscape mode on mobile browsers. I have little knowledge about implementing the fullscreen API into my code. Any help (example project) is very much appreciated.

Thx in advance.

[ClayUUID · Accepted solution]

You want the requestFullscreen API. Unfortunately most browser makers haven't standardized on what to call it yet, so using it is kind of a pain. This seems to work:

this.myButton.addEventListener("click", doFullscreen);

function doFullscreen() {

    var i;

    var elem = document.getElementById("animation_container");

    var fs = ["requestFullscreen", "webkitRequestFullscreen", "mozRequestFullScreen", "msRequestFullscreen"];

    for (i = 0; i < 4; i++) {

        if (elem[fs]) {

            elem[fs]();

            break;

        }

    }

}

In Animate your content won't stretch to full screen size unless you have it set to fill the screen in the publish settings.

If you want to detect whether the fullscreen attempt succeeded, and provide a button for un-fullscreening, it gets even more complicated.

Fullscreen API - Web APIs | MDN

[Hans_Kroll]

Hello,

That's really incredible. Thank you so much! Quick test on Chrome and Firefox on Android and it works (although you have to rotate the device yourself for landscape mode). The un-fullscreening I will solve in another way (redirect to original URL). I'm very grateful, thanks!

Edit: unfortunately, when testing it on an iPod touch 5th gen (iOS 9), the screen doesn't turn to fullscreen in Safari, Chrome or Firefox. But I'm afraid that is correct?