Fullscreen Mode in TCJSgame

TCJSgame includes built-in support for fullscreen mode. This allows your game canvas to expand and fill the entire screen, creating a more immersive experience for players. You can toggle fullscreen with two simple methods: display.fullScreen() and display.exitScreen().

Entering Fullscreen

To enable fullscreen, call the fullScreen() method on your Display object. This requests the browser to display the canvas at maximum size.


let display = new Display();
display.start();

function update() {
  if (display.keys[70]) { // Press F key
    display.fullScreen();
  }
}

Exiting Fullscreen

To return to normal mode, call exitScreen(). This restores the canvas to its original size in the webpage.


function update() {
  if (display.keys[27]) { // Press ESC
    display.exitScreen();
  }
}

Practical Use Case

Many developers allow players to toggle fullscreen with a key such as F. This improves usability for both desktop and mobile browsers. For example, on mobile, fullscreen ensures that your game uses all available space without browser chrome or scrollbars.

Note: Fullscreen requests must be triggered by a user action (like a key press or mouse click). Browsers usually block automatic fullscreen activation for security reasons.

TCJSgame Docs

Fullscreen Mode in TCJSgame

Entering Fullscreen

Exiting Fullscreen

Practical Use Case