Ebiten: Fullscreen by `requestFullscreen` on browsers

[hajimehoshi]

Now SetFullscreen doesn't work on browsers. I'm thinking if an Ebiten application in Wasm in an iframe could be fullscreen by SetFullscreen(true) by using Web API requestFullscreen.

[shoebsd31]

_No description provided._

Hi could you please add some description ?

[hajimehoshi]

Hi could you please add some description ?

Updated :)

[tomlister]

Hi,

As requestFullscreen works on any element, simply calling requestFullscreen on the canvas element will trigger the browser to make ebiten fullscreen.
Caveats:
According to MDN

Note: This method must be called while responding to a user interaction or a device orientation change; otherwise it will fail.

As a result of this during testing I noticed that sometimes I'd have to double tap "F" to trigger a successful fullscreen. Any quick input previous to the triggering key works too, i.e clicking or pressing WASD, and then pressing "F" to trigger fullscreen.

func (u *UserInterface) SetFullscreen(fullscreen bool) {
    canvas.Call("requestFullscreen")
    return
}

[tomlister]

Updating IsFullscreen and any documentation is also necessary.

[hajimehoshi]

Yeah, good point! A user gesture is required like Pointer Lock API (https://github.com/hajimehoshi/ebiten/issues/1604#issuecomment-822946880).

So, we have to handle fullscreenerror and show an error message on the console like what Ebiten has already done for Pointer Lock API.

Updating IsFullscreen and any documentation is also necessary.

Yes!

[tomlister]

SetFullscreen

• Should check if the canvas is initialised
• Enter fullscreen when fullscreen argument is true
• Exit fullscreen when fullscreen argument is false

func (u *UserInterface) SetFullscreen(fullscreen bool) {
    if !canvas.Truthy() {
        return
    }
    if fullscreen {
        canvas.Call("requestFullscreen")
        return
    }
    document.Call("exitFullscreen")
    return
}

[hajimehoshi]

Yes, the direction seems correct :-)

[tomlister]

We can also check if the current ebiten canvas is fullscreen or not, but for now it just checks if there is any element in fullscreen.

func (u *UserInterface) IsFullscreen() bool {
    if document.Get("fullscreenElement").IsNull() {
        return false
    }
    return true
}

[hajimehoshi]

I think this works. document might be null in a very special environment. So let's add

if !document.Truthy() {
    return false
}

[tomlister]

I think this works. document might be null in a very special environment. So let's add

if !document.Truthy() {
    return false
}

PR addresses this 👍