Module gamejs/display

Methods to create, access and manipulate the display Surface.


gamejs.display.setMode() understands three flags:

  • gamejs.display.FULLSCREEN
  • gamejs.display.DISABLE_SMOOTHING
  • gamejs.display.POINTERLOCK (implies FULLSCREEN)

// disable smoothing gamejs.display.setMode([800, 600], gamejs.display.DISABLESMOOTHING); // disable smoothing and fullscreen gamejs.display.setMode([800, 600], gamejs.display.DISABLESMOOTHING | gamejs.display.FULLSCREEN);

DOM node ids accessed by this module:

  • #gjs-canvas - the display surface
  • #gjs-loader - loading bar
  • #gjs-fullscreen-toggle a clickable element to enable fullscreen
  • #gjs-canvas-wrapper this wrapper is added when in fullscreen mode

Fullscreen mode

When setMode() is called with the fullscreen flag then the fullscreen mode can be enabled by the player by clicking on the DOM element with id "gjs-fullscreen-toggle". Browser security requires that a user enables fullscreen with a "gesture" (e.g., clicking a button) and we can not enable fullscreen in code.

Fullscreen mode can be exited by many keys, e.g., anything window manager related (ALT-TAB) or ESC. A lot of keys will trigger a browser information popup explaining how fullscreen mode can be exited.

The following keys are "whitelisted" in fullscreen mode and will not trigger such a browser popup:

  • left arrow, right arrow, up arrow, down arrow
  • space
  • shift, control, alt
  • page up, page down
  • home, end, tab, meta


var display = gamejs.display.setMode([800, 600]);
// blit sunflower picture in top left corner of display
var sunflower = gamejs.image.load("images/sunflower");





Pass this flag to gamejs.display.setMode(resolution, flags) to disable pixel smoothing; this is, for example, useful for retro-style, low resolution graphics where you don't want the browser to smooth them when scaling & drawing.

getSurface ()

Drawing on the Surface returned by getSurface() will draw on the screen.


gamejs.Surface the display Surface

setCaption (title, icon)

Set the Caption of the Display (document.title)


String title the title of the app
gamejs.Image icon FIXME implement favicon support

setMode (dimensions, flags)

Set the width and height of the Display. Conviniently this will return the actual display Surface - the same as calling gamejs.display.getSurface() later on.


Array dimensions [width, height] of the display surface
Number flags gamejs.display.DISABLE_SMOOTHING | gamejs.display.FULLSCREEN | gamejs.display.POINTERLOCK