Canvas

The Canvas class represents the rendering surface of a bg2 engine web application. It encapsulates an HTML <canvas> element and associates it with a rendering backend, providing access to rendering context, dimensions, and utility functions such as screenshots.

It acts as the bridge between the DOM and the rendering system.

Constructor

constructor(domElement: HTMLCanvasElement, renderer: any)

Creates a new Canvas instance bound to a DOM canvas element and a renderer.

During construction:

• The renderer is stored internally
• The DOM element is assigned a unique identifier
• The first created canvas is stored globally for later access
• The main loop reference is initialized to null (assigned later by MainLoop)

Parameters

• domElement: HTML canvas element used for rendering
• renderer: Rendering backend associated with this canvas

---

Static Methods

static FirstCanvas(): Canvas

Returns the first created Canvas instance.

Throws an error if no canvas has been created yet.

---

Properties

id: string

Unique identifier associated with the canvas DOM element.

mainLoop: any

Reference to the MainLoop associated with this canvas.

This value is assigned during MainLoop construction.

renderer: any

Read-only reference to the rendering backend.

domElement: HTMLCanvasElement

Read-only reference to the underlying DOM canvas element.

width: number

Current width of the canvas in CSS pixels.

height: number

Current height of the canvas in CSS pixels.

viewport: { width: number; height: number; aspectRatio: number }

Returns the current viewport size and aspect ratio.

• width: Canvas width
• height: Canvas height
• aspectRatio: width / height

---

Methods

async init(): Promise<void>

Initializes the renderer associated with this canvas.

This method delegates initialization to the renderer by passing the current canvas instance.

Returns

A promise resolved when initialization completes.

---

updateViewportSize(): void

Updates the internal canvas resolution to match the displayed size, taking into account the device pixel ratio.

This ensures correct rendering on high-DPI displays by scaling the internal buffer according to window.devicePixelRatio.

---

screenshot(format?: string, width?: number, height?: number): string

Captures the current content of the canvas and returns it as a data URL.

Optionally, the canvas can be temporarily resized to capture the image at a different resolution.

Parameters

• format: Output format (e.g., "image/png", "image/jpeg")
• width: Optional width for the screenshot
• height: Optional height for the screenshot (defaults to width if not provided)

Behavior

• If no size is specified, captures the current canvas content directly
• If a size is specified:
  • Temporarily resizes the canvas
  • Forces a render (reshape + display)
  • Captures the image
  • Restores the original canvas size and state

Returns

A base64-encoded data URL containing the captured image.

---

Usage Notes

The Canvas class is responsible for managing the rendering surface and exposing its state to the rest of the engine. It does not implement rendering logic directly; instead, it delegates all rendering operations to the associated renderer.

A Canvas instance is typically paired with a MainLoop, which manages the application lifecycle and event handling.

Example

const canvasElement = document.getElementById('myCanvas') as HTMLCanvasElement;
const renderer = new WebGLRenderer();

const canvas = new Canvas(canvasElement, renderer);
await canvas.init();

Related Types

• MainLoop
• AppController