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 Element
interfaces.
How to use:
use
Element.requestFullscreen()
to place the element in fullscreen modeuse
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
Top comments (0)