Javascript fullscreen request is being rejected in chrome

Question

I am trying to make a html5 canvas fullscreen, so I used the javascript api and a button to go fullscreen.

Here is the html button code:

<button onclick="fullscreen()">Pantalla completa</button>

The fullscreen function looks like this:

function fullscreen(){
    var elem = myGameArea.canvas;

    try {
        if (elem.requestFullscreen) {
            prom = elem.requestFullscreen();
        } else if (elem.mozRequestFullScreen) { /* Firefox */
        elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
            elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) { /* IE/Edge */
            elem.msRequestFullscreen();
        }         
    }
    catch (error) {
        console.error(error);
    }
}

This works fine with mozilla firefox, but in chrome it gives the error: Browser console error

I can't understand why, because I'm calling it when the user interacts, pressing the button.

Answer 1

Well you didn't say that you are using iframe element, so you need to add allow="fullscreen" attribute in order to do that