Dev challenge: The Fullscreen API

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

The Fullscreen API:

The fullscreen API is used to toggle fullscreen on webpages. This can be useful in games and videos where we may want to toggle fullscreen to phase out distractions for an imersive experience. It has no interface, but adds methods to the Document and Elementinterfaces.

How to use:

• use Element.requestFullscreen()to place the element in fullscreen mode

• use document.exitFullscreen()to exit fullscreen

Basic example:

const canvas = document.getElementById('canvas');
canvas.addEventListener(
  "keydown",
  (e) => {
    if (e.key === "Enter") {
      toggleFullScreen();
    }
  },
);
function toggleFullscreen(){
  if(!document.fullscreenElement){
    canvas.requestFullscreen();
  }else {
    document.exitFullscreen();
  }
}

source: MDN web docs