Fullscreen on HTML-based UI

[ttay24]

Hi, I followed the docs on created an html based UI and I've managed to get react running on top of my game. However, it seems like those DOM objects don't translate into full screen mode. Is there some configuration that I could be missing, or will an HTML based UI just not be able to be placed over the top of a fullscreen canvas?

Thanks!

[eonarheim]

Hi @ttay24 great question!

You'll need to work around the way excalibur is implemented at the moment (I'll add an issue to support this out of the box). Excalibur currently targets the canvas element directly.

As a workaround, you can define a container element around a game canvas, and position your UI elements above the canvas. Then manually invoke the fullscreen browser api on that container element, which will include those UI elements.

The browser only allows the fullscreen api to be triggered by a user action so you may need to wire up to an html button or reuse the excalibur start button.

.ui {
  position: absolute;
  right: 0;
}

<div id="container" class="container">
    <div class="ui">
      <div>Some UI text positioned on top of the canvas</div>
      <button>Click me!</button>
    </div>
    <canvas id="game"></canvas>
</div>

const game = new ex.Engine({
  canvasElementId: 'game'
});

// Reuse the excalibur button
game.start().then(() => {
  const container = document.getElementById("container");
  container.requestFullscreen();
});

// Or wire up to your own button
const button = document.getElementById("my-button");
button.addEventListener('click', () => {
  const container = document.getElementById("container");
  container.requestFullscreen();
});

[ttay24]

awesome, thanks for the info and the example! That makes sense

[eonarheim]

Let us know how your react UI goes, we'd love to see what you're building!