Skip to main content

DisplayMode

Enum representing the different display modes available to Excalibur.

Index

Enumeration Members

Enumeration Members

FillContainer

FillContainer: FillContainer

Use the parent DOM container's css width/height for the game resolution dynamically

FillScreen

FillScreen: FillScreen

Fill the entire screen's css width/height for the game resolution dynamically. This means the resolution of the game will change dynamically as the window is resized. This is not the same as Screen.goFullScreen

FitContainer

FitContainer: FitContainer

Fit to parent element width/height using as much space as possible while maintaining aspect ratio and resolution.

FitContainerAndFill

FitContainerAndFill: FitContainerAndFill

Fit the aspect ratio given by the game resolution within the container at all times will fill any gaps with canvas. The displayed area outside the aspect ratio is not guaranteed to be on the screen, only the Screen.contentArea is guaranteed to be on screen.

FitContainerAndZoom

FitContainerAndZoom: FitContainerAndZoom

Fit the viewport to the parent element maintaining aspect ratio given by the game resolution, but zooms in to avoid the black bars (letterbox) that would otherwise be present in FitContainer.

warning This will clip some drawable area from the user because of the zoom, use Screen.contentArea to know the safe to draw area.

FitScreen

FitScreen: FitScreen

Fit to screen using as much space as possible while maintaining aspect ratio and resolution. This is not the same as Screen.goFullScreen but behaves in a similar way maintaining aspect ratio.

You may want to center your game here is an example

<!-- html -->
<body>
<main>
  <canvas id="game"></canvas>
</main>
</body>
// css
main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

FitScreenAndFill

FitScreenAndFill: FitScreenAndFill

Fit the aspect ratio given by the game resolution the screen at all times will fill the screen. This displayed area outside the aspect ratio is not guaranteed to be on the screen, only the Screen.contentArea is guaranteed to be on screen.

FitScreenAndZoom

FitScreenAndZoom: FitScreenAndZoom

Fit the viewport to the device screen maintaining aspect ratio given by the game resolution, but zooms in to avoid the black bars (letterbox) that would otherwise be present in FitScreen.

warning This will clip some drawable area from the user because of the zoom, use Screen.contentArea to know the safe to draw area.

Fixed

Fixed: Fixed

Default, use a specified resolution for the game. Like 800x600 pixels for example.

Page Options