HTML5 button disappears when going to fullscreen canvas

Question

I'm writing a javascript game and I'm having a bit of trouble trying to get my game work with the requestFullscreen feature. My game exists of a menu with a button (html5 button) to start the gameloop. But when I go in fullscreen, the menu goes to fullscreen, but the button that can start the gameloop, disappears. I was wondering if it's possible to still have html5 buttons on screen while being in canvas fullscreen mode.

Thanks in advance

Answer 1

Requesting full screen mode will make the element (and its children) full-screen. Anything else will be hidden.

As the canvas element can't have children you need to wrap it and the elements you want to see in a parent container, ie. a div element.

<div id="cover">
    <canvas ... ></canvas>
    <button ... >My button</button>
</div>

Now you can request full-screen mode on cover.

Note however: the full-screen API isn't final and do behave different from browser to browser. You may need to add specific CSS for each element for full-screen mode versus non-full-screen mode.