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>
 true

Required for snapshots, disable for performance
targetfps number <optional>
 30

Target frames per second for rendering
srgb boolean <optional>
 true

Whether to enable sRGB color space or display-P3 for the output framebuffer
stencil boolean <optional>
 false

Whether to enable stencil buffer support
useOffscreenFramebuffer boolean <optional>
 true

Whether to use offscreen framebuffer 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

dispose()

Cleanup resources when canvas is no longer needed

Source:

getActiveFramebuffer()

Gets the currently active framebuffer. Use this when you need to save the state before changing framebuffers.

Source:
Returns:

The currently active framebuffer

Type
WebGLFramebuffer

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);

setActiveFramebuffer(framebuffer)

Sets the active framebuffer. Use this to restore a previously saved state.

Parameters:
Name Type Description
framebuffer WebGLFramebuffer

The framebuffer to activate
Source:

setSplitViewport(enabled, leftLayerIds, rightLayerIds)

Enables or disables split viewport mode and sets which layers appear on each side

Parameters:
Name Type Description
enabled boolean

Whether split viewport mode is enabled
leftLayerIds Array.<string>

Array of layer IDs to show on left side
rightLayerIds Array.<string>

Array of layer IDs to show on right side
Source:
Fires:

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: