OpenLIME

Class: Canvas

Canvas

Canvas class that manages WebGL context, layers, and scene rendering. Handles layer management, WebGL context creation/restoration, and render timing.

new Canvas(canvas, overlay, camera [, options])

Creates a new Canvas instance with WebGL context and overlay support.

Parameters:
Name Type Argument Description
canvas HTMLCanvasElement | string

Canvas DOM element or selector
overlay HTMLElement | string

Overlay DOM element or selector for decorations (annotations, glyphs)
camera Camera

Scene camera instance
options Object <optional>

Configuration options

Properties
Name Type Argument Default Description
layers Object <optional>

Layer configurations mapping layer IDs to Layer instances
preserveDrawingBuffer boolean <optional>
 false

Whether to preserve WebGL buffers until manually cleared
targetfps number <optional>
 30

Target frames per second for rendering
Source:
Fires:

Methods

addLayer(id, layer)

Adds a layer to the canvas.

Parameters:
Name Type Description
id string

Unique identifier for the layer
layer Layer

Layer instance to add
Source:
Fires:
Throws:

If layer ID already exists

Type
Error

getState( [stateMask])

Retrieves current state of the canvas and its components.

Parameters:
Name Type Argument Default Description
stateMask Object <optional>
 null

Optional mask to filter returned state properties
Source:
Returns:

Current state object

Type
Object

removeLayer(layer)

Removes a layer from the canvas.

Parameters:
Name Type Description
layer Layer

Layer instance to remove
Source:
Example
const layer = new Layer(options);
canvas.addLayer('map', layer);
// ... later ...
canvas.removeLayer(layer);

setState(state, dt [, easing])

Updates the state of the canvas and its components.

Parameters:
Name Type Argument Default Description
state Object

State object containing updates

Properties
Name Type Argument Description
camera Object <optional>

Camera state updates
layers Object <optional>

Layer state updates
dt number

Animation duration in milliseconds
easing string <optional>
 'linear'

Easing function for animations
Source:

Events

ready

Fired when all layers are initialized and ready to display.

Source:

update

Fired when canvas content is updated (layer changes, camera moves).

Source:

updateSize

Fired when canvas or layout size changes.

Source: