Display GUI elements

cheerpjCreateDisplay adds an element to the DOM which will be used for graphical rendering.

function cheerpjCreateDisplay(
width: number,
height: number,
parent?: HTMLElement,
): HTMLElement;


  • width (number) - The width of the display area in CSS pixels, or -1 to match parent width.
  • height (number) - The height of the display area in CSS pixels, or -1 to match parent height.
  • parent (HTMLElement, optional) - Element to add display as a child of.


cheerpjCreateDisplay returns an HTMLElement representing the created display.


Create a display

cheerpjCreateDisplay(800, 600);

This creates a 800x600 display for rendering, and appends it to the document body.

Take up the whole page

cheerpjCreateDisplay(-1, -1, document.body);

This creates a display that takes up the whole page, and responds to changes in the page size.

Usage with React

import { useRef, useEffect } from "react";
function Display({ width, height }) {
const parent = useRef();
useEffect(() => {
cheerpjCreateDisplay(width, height, parent);
return <div ref={parent} />;
Was this page helpful?
Suggest changes