DEV Community

Israel Rotimi
Israel Rotimi

Posted on

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

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();
  }
}
Enter fullscreen mode Exit fullscreen mode

source: MDN web docs

Top comments (0)