As we move toward more true web applications, our JavaScript APIs are doing their best to keep up. One very simple but useful new JavaScript API is the Fullscreen API. The Fullscreen API provides a programmatic way to request fullscreen display from the user, and cancel fullscreen when desired. Here’s how to use this incredibly simple API!

Simply call the request method on the element you’d like to receive fullscreen and the window morphs to fullscreen, requesting that the user allow fullscreen mode. Remember it’s plausible that the user will reject fullscreen mode. If fullscreen mode is accepted, the toolbars and general chrome go away, making the document frame span the entire width and height of the screen.

Canceling Fullscreen Mode

The cancelFullScreen method (also prefixed in older browsers) morphs the browser chrome back into standard layout:

The fullscreen API is super simple and super useful. I first saw this API used with MDN’s BananaBread demo, an all-client-side first person shooter, a perfect excuse to go fullscreen. The fullscreen API provides a way to enter and exit fullscreen mode, as well as an event to detect fullscreen state change, so all bases are covered. Keep this nice API in mind for your future ventures — it may come in handy!