import { Transform } from './Transform.js'
import { BoundingBox } from './BoundingBox.js'
import { addSignals } from './Signals.js'
import { Layer } from './Layer.js'
import { Cache } from './Cache.js'
//// HELPERS
window.structuredClone = typeof (structuredClone) == "function" ? structuredClone : function (value) { return JSON.parse(JSON.stringify(value)); };
/**
* Canvas class that manages WebGL context, layers, and scene rendering.
* Handles layer management, WebGL context creation/restoration, and render timing.
*/
class Canvas {
/**
* Creates a new Canvas instance with WebGL context and overlay support.
* @param {HTMLCanvasElement|string} canvas - Canvas DOM element or selector
* @param {HTMLElement|string} overlay - Overlay DOM element or selector for decorations (annotations, glyphs)
* @param {Camera} camera - Scene camera instance
* @param {Object} [options] - Configuration options
* @param {Object} [options.layers] - Layer configurations mapping layer IDs to Layer instances
* @param {boolean} [options.preserveDrawingBuffer=false] - Whether to preserve WebGL buffers until manually cleared
* @param {number} [options.targetfps=30] - Target frames per second for rendering
* @param {boolean} [options.srgb=true] - Whether to enable sRGB color space or display-P3 for the output framebuffer
* @param {boolean} [options.stencil=false] - Whether to enable stencil buffer support
* @param {boolean} [options.useOffscreenFramebuffer=true] - Whether to use offscreen framebuffer for rendering
* @fires Canvas#update
* @fires Canvas#updateSize
* @fires Canvas#ready
*/
constructor(canvas, overlay, camera, options) {
Object.assign(this, {
canvasElement: null,
preserveDrawingBuffer: false,
gl: null,
overlayElement: null,
camera: camera,
layers: {},
ready: false,
targetfps: 30,
fps: 0,
timing: [16], //records last 30 frames time from request to next draw, rolling, primed to avoid /0
timingLength: 5, //max number of timings.
overBudget: 0, //fraction of frames that took too long to render.
srgb: true, // Enable sRGB color space by default
isSrgbSimplified: true,
stencil: false, // Disable stencil buffer by default
useOffscreenFramebuffer: true, // Use offscreen framebuffer by default
// Framebuffer objects
offscreenFramebuffer: null,
offscreenTexture: null,
offscreenRenderbuffer: null,
_renderingToOffscreen: false, // Traccia se stiamo renderizzando sul framebuffer off-screen
signals: { 'update': [], 'updateSize': [], 'ready': [] },
// Split viewport properties
splitViewport: false,
leftLayers: [],
rightLayers: []
});
Object.assign(this, options);
this.init(canvas, overlay);
for (let id in this.layers)
this.addLayer(id, new Layer(this.layers[id]));
this.camera.addEvent('update', () => this.emit('update'));
}
/**
* Records render timing information and updates FPS statistics.
* @param {number} elapsed - Time elapsed since last frame in milliseconds
* @private
*/
addRenderTiming(elapsed) {
this.timing.push(elapsed);
while (this.timing.length > this.timingLength)
this.timing.shift();
this.overBudget = this.timing.filter(t => t > 1000 / this.targetfps).length / this.timingLength;
this.fps = 1000 / (this.timing.reduce((sum, a) => sum + a, 0) / this.timing.length);
}
/**
* Initializes WebGL context and sets up event listeners.
* @param {HTMLCanvasElement|string} canvas - Canvas element or selector
* @param {HTMLElement|string} overlay - Overlay element or selector
* @throws {Error} If canvas or overlay elements cannot be found or initialized
* @private
*/
init(canvas, overlay) {
if (!canvas)
throw "Missing element parameter"
if (typeof (canvas) == 'string') {
canvas = document.querySelector(canvas);
if (!canvas)
throw "Could not find dom element.";
}
if (!overlay)
throw "Missing element parameter"
if (typeof (overlay) == 'string') {
overlay = document.querySelector(overlay);
if (!overlay)
throw "Could not find dom element.";
}
if (!canvas.tagName)
throw "Element is not a DOM element"
if (canvas.tagName != "CANVAS")
throw "Element is not a canvas element";
this.canvasElement = canvas;
this.overlayElement = overlay;
/* test context loss */
/* canvas = WebGLDebugUtils.makeLostContextSimulatingCanvas(canvas);
canvas.loseContextInNCalls(1000); */
const glopt = {
antialias: false,
depth: false,
stencil: this.stencil,
preserveDrawingBuffer: this.preserveDrawingBuffer,
colorSpace: this.srgb ? 'srgb' : 'display-p3'
};
this.gl = this.gl ||
canvas.getContext("webgl2", glopt);
if (!this.gl)
throw new Error("Could not create a WebGL 2.0 context");
// Initialize offscreen framebuffer if enabled
if (this.useOffscreenFramebuffer) {
this.setupOffscreenFramebuffer();
}
canvas.addEventListener("webglcontextlost", (event) => { console.log("Context lost."); event.preventDefault(); }, false);
canvas.addEventListener("webglcontextrestored", () => { this.restoreWebGL(); }, false);
document.addEventListener("visibilitychange", (event) => { if (this.gl.isContextLost()) { this.restoreWebGL(); } });
this.hasFloatRender = !!this.gl.getExtension('EXT_color_buffer_float');
this.hasLinearFloat = !!this.gl.getExtension('OES_texture_float_linear');
console.log('Support for rendering to float textures:', this.hasFloatRender);
console.log('Support for linear filtering on float textures:', this.hasLinearFloat);
}
/**
* Sets up the offscreen framebuffer for rendering
* @private
*/
setupOffscreenFramebuffer() {
const gl = this.gl;
// Create a framebuffer
this.offscreenFramebuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, this.offscreenFramebuffer);
// Create a texture to render to
this.offscreenTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, this.offscreenTexture);
// Define size based on canvas size
const width = this.canvasElement.width;
const height = this.canvasElement.height;
// Initialize texture with null (we'll resize it properly in resizeOffscreenFramebuffer)
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
// Set texture parameters
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
// If stencil is enabled, create a renderbuffer for it
if (this.stencil) {
this.offscreenRenderbuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, this.offscreenRenderbuffer);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width, height);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.offscreenRenderbuffer);
}
// Attach the texture to the framebuffer
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.offscreenTexture, 0);
// Check framebuffer status
const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
if (status !== gl.FRAMEBUFFER_COMPLETE) {
console.error("Framebuffer not complete. Status:", status);
// Fall back to direct rendering
this.useOffscreenFramebuffer = false;
}
// Unbind framebuffer to restore default
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.bindTexture(gl.TEXTURE_2D, null);
if (this.stencil) {
gl.bindRenderbuffer(gl.RENDERBUFFER, null);
}
}
/**
* Resizes the offscreen framebuffer when canvas size changes
* @private
*/
resizeOffscreenFramebuffer() {
if (!this.useOffscreenFramebuffer || !this.offscreenFramebuffer) return;
const gl = this.gl;
const width = this.canvasElement.width;
const height = this.canvasElement.height;
// Resize texture
gl.bindTexture(gl.TEXTURE_2D, this.offscreenTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
// Resize renderbuffer if stencil is enabled
if (this.stencil && this.offscreenRenderbuffer) {
gl.bindRenderbuffer(gl.RENDERBUFFER, this.offscreenRenderbuffer);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width, height);
}
gl.bindTexture(gl.TEXTURE_2D, null);
if (this.stencil) {
gl.bindRenderbuffer(gl.RENDERBUFFER, null);
}
}
/**
* Gets the currently active framebuffer.
* Use this when you need to save the state before changing framebuffers.
* @returns {WebGLFramebuffer} The currently active framebuffer
*/
getActiveFramebuffer() {
if (this.useOffscreenFramebuffer && this._renderingToOffscreen) {
return this.offscreenFramebuffer;
}
return null; // Rappresenta il framebuffer di default (schermo)
}
/**
* Sets the active framebuffer.
* Use this to restore a previously saved state.
* @param {WebGLFramebuffer} framebuffer - The framebuffer to activate
*/
setActiveFramebuffer(framebuffer) {
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, framebuffer);
this._renderingToOffscreen = (framebuffer === this.offscreenFramebuffer);
}
/**
* Updates the state of the canvas and its components.
* @param {Object} state - State object containing updates
* @param {Object} [state.camera] - Camera state updates
* @param {Object} [state.layers] - Layer state updates
* @param {number} dt - Animation duration in milliseconds
* @param {string} [easing='linear'] - Easing function for animations
*/
setState(state, dt, easing = 'linear') {
if ('camera' in state) {
const m = state.camera;
this.camera.setPosition(dt, m.x, m.y, m.z, m.a, easing);
}
if ('layers' in state)
for (const [k, layerState] of Object.entries(state.layers))
if (k in this.layers) {
const layer = this.layers[k];
layer.setState(layerState, dt, easing);
}
}
/**
* Retrieves current state of the canvas and its components.
* @param {Object} [stateMask=null] - Optional mask to filter returned state properties
* @returns {Object} Current state object
*/
getState(stateMask = null) {
let state = {};
if (!stateMask || stateMask.camera) {
let now = performance.now();
let m = this.camera.getCurrentTransform(now);
state.camera = { 'x': m.x, 'y': m.y, 'z': m.z, 'a': m.a };
}
state.layers = {};
for (let layer of Object.values(this.layers)) {
const layerMask = window.structuredClone(stateMask);
if (stateMask && stateMask.layers) Object.assign(layerMask, stateMask.layers[layer.id]);
state.layers[layer.id] = layer.getState(layerMask);
}
return state;
}
/**
* Restores WebGL context after loss.
* Reinitializes shaders and textures for all layers.
* @private
*/
restoreWebGL() {
let glopt = {
antialias: false,
depth: false,
stencil: this.stencil,
preserveDrawingBuffer: this.preserveDrawingBuffer,
colorSpace: this.srgb ? 'srgb' : 'display-p3'
};
this.gl = this.gl || this.canvasElement.getContext("webgl2", glopt);
// Recreate offscreen framebuffer
if (this.useOffscreenFramebuffer) {
if (this.offscreenFramebuffer) {
this.gl.deleteFramebuffer(this.offscreenFramebuffer);
}
if (this.offscreenTexture) {
this.gl.deleteTexture(this.offscreenTexture);
}
if (this.offscreenRenderbuffer) {
this.gl.deleteRenderbuffer(this.offscreenRenderbuffer);
}
this.setupOffscreenFramebuffer();
}
for (let layer of Object.values(this.layers)) {
layer.gl = this.gl;
layer.clear();
if (layer.shader)
layer.shader.restoreWebGL(this.gl);
}
this.prefetch();
this.emit('update');
}
/**
* Adds a layer to the canvas.
* @param {string} id - Unique identifier for the layer
* @param {Layer} layer - Layer instance to add
* @fires Canvas#update
* @fires Canvas#ready
* @throws {Error} If layer ID already exists
*/
addLayer(id, layer) {
console.assert(!(id in this.layers), "Duplicated layer id");
layer.id = id;
layer.addEvent('ready', () => {
if (Object.values(this.layers).every(l => l.status == 'ready')) {
this.ready = true;
this.emit('ready');
}
this.prefetch();
});
layer.addEvent('update', () => { this.emit('update'); });
layer.addEvent('updateSize', () => { this.updateSize(); });
layer.gl = this.gl;
layer.canvas = this;
layer.overlayElement = this.overlayElement;
layer.isSrgbSimplified = this.isSrgbSimplified;
this.layers[id] = layer;
this.prefetch();
}
/**
* Removes a layer from the canvas.
* @param {Layer} layer - Layer instance to remove
* @example
* const layer = new Layer(options);
* canvas.addLayer('map', layer);
* // ... later ...
* canvas.removeLayer(layer);
*/
removeLayer(layer) {
layer.clear(); //order is important.
delete this.layers[layer.id];
delete Cache.layers[layer];
this.prefetch();
}
updateSize() {
const discardHidden = false;
let sceneBBox = Layer.computeLayersBBox(this.layers, discardHidden);
let minScale = Layer.computeLayersMinScale(this.layers, discardHidden);
// Only update camera bounds if we have a valid bounding box and a viewport
if (sceneBBox && this.camera.viewport && !sceneBBox.isEmpty()) {
this.camera.updateBounds(sceneBBox, minScale);
}
// Resize offscreen framebuffer when canvas size changes
if (this.useOffscreenFramebuffer) {
this.resizeOffscreenFramebuffer();
}
this.emit('updateSize');
}
/**
* Enables or disables split viewport mode and sets which layers appear on each side
* @param {boolean} enabled - Whether split viewport mode is enabled
* @param {string[]} leftLayerIds - Array of layer IDs to show on left side
* @param {string[]} rightLayerIds - Array of layer IDs to show on right side
* @fires Canvas#update
*/
setSplitViewport(enabled, leftLayerIds = [], rightLayerIds = []) {
this.splitViewport = enabled;
this.leftLayers = leftLayerIds;
this.rightLayers = rightLayerIds;
this.emit('update');
}
/**
* Renders a frame at the specified time.
* @param {number} time - Current time in milliseconds
* @returns {boolean} True if all animations are complete
* @private
*/
draw(time) {
let gl = this.gl;
let view = this.camera.glViewport();
// Bind offscreen framebuffer if enabled
if (this.useOffscreenFramebuffer) {
gl.bindFramebuffer(gl.FRAMEBUFFER, this.offscreenFramebuffer);
this._renderingToOffscreen = true;
} else {
this._renderingToOffscreen = false;
}
gl.viewport(view.x, view.y, view.dx, view.dy);
var b = [0, 0, 0, 0];
gl.clearColor(b[0], b[1], b[2], b[3], b[4]);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.enable(gl.BLEND);
let pos = this.camera.getGlCurrentTransform(time);
this.prefetch(pos);
//pos layers using zindex.
let ordered = Object.values(this.layers).sort((a, b) => a.zindex - b.zindex);
let done = true;
if (this.splitViewport) {
// For split viewport mode, we need to enable scissor test to split the rendering area
gl.enable(gl.SCISSOR_TEST);
const halfWidth = Math.floor(view.dx / 2);
// Draw left side (apply scissor to left half)
gl.scissor(view.x, view.y, halfWidth, view.dy);
for (let layer of ordered) {
if (this.leftLayers.includes(layer.id)) {
// Pass the full viewport but scissor will restrict drawing
done = layer.draw(pos, view) && done;
}
}
// Draw right side (apply scissor to right half)
gl.scissor(view.x + halfWidth, view.y, view.dx - halfWidth, view.dy);
for (let layer of ordered) {
if (this.rightLayers.includes(layer.id)) {
// Pass the full viewport but scissor will restrict drawing
done = layer.draw(pos, view) && done;
}
}
// Disable scissor when done
gl.disable(gl.SCISSOR_TEST);
} else {
// Standard rendering for normal mode
for (let layer of ordered) {
if (layer.visible)
done = layer.draw(pos, view) && done;
}
}
// Copy offscreen framebuffer to the screen if enabled
if (this.useOffscreenFramebuffer) {
// Switch to default framebuffer (the screen)
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
this._renderingToOffscreen = false;
// Draw the offscreen texture to the screen
this.drawOffscreenToCanvas();
}
// Use the isComplete flag from the transform instead of direct time comparison
return done && pos.isComplete;
}
/**
* Draws the offscreen framebuffer texture to the canvas
* @private
*/
drawOffscreenToCanvas() {
const gl = this.gl;
const view = this.camera.glViewport();
// Set viewport for the final display
gl.viewport(view.x, view.y, view.dx, view.dy);
// If we don't already have a fullscreen quad program, create one
if (!this._fullscreenQuadProgram) {
// Vertex shader
const vsSource = `#version 300 es
in vec4 aPosition;
in vec2 aTexCoord;
out vec2 vTexCoord;
void main() {
gl_Position = aPosition;
vTexCoord = aTexCoord;
}
`;
// Fragment shader
let fsSource = `#version 300 es
precision highp float;
in vec2 vTexCoord;
uniform sampler2D uTexture;
out vec4 fragColor;`;
if (this.isSrgbSimplified) {
fsSource += `
vec4 linear2srgb(vec4 linear) {
return vec4(pow(linear.rgb, vec3(1.0/2.2)), linear.a);
}`;
} else {
fsSource += `
vec4 linear2srgb(vec4 linear) {
bvec3 cutoff = lessThan(linear.rgb, vec3(0.0031308));
vec3 higher = vec3(1.055) * pow(linear.rgb, vec3(1.0/2.4)) - vec3(0.055);
vec3 lower = linear.rgb * vec3(12.92);
return vec4(mix(higher, lower, cutoff), linear.a);
}`;
}
fsSource += `
void main() {
fragColor = texture(uTexture, vTexCoord);
fragColor = linear2srgb(fragColor);
fragColor = clamp(fragColor, 0.0, 1.0);
}`;
// Create shader program
const vertexShader = this._createShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = this._createShader(gl, gl.FRAGMENT_SHADER, fsSource);
this._fullscreenQuadProgram = this._createProgram(gl, vertexShader, fragmentShader);
// Get attribute and uniform locations
this._positionLocation = gl.getAttribLocation(this._fullscreenQuadProgram, 'aPosition');
this._texCoordLocation = gl.getAttribLocation(this._fullscreenQuadProgram, 'aTexCoord');
this._textureLocation = gl.getUniformLocation(this._fullscreenQuadProgram, 'uTexture');
// Create buffers for fullscreen quad
this._quadPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this._quadPositionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-1.0, 1.0, 0.0,
-1.0, -1.0, 0.0,
1.0, 1.0, 0.0,
1.0, -1.0, 0.0
]), gl.STATIC_DRAW);
this._quadTexCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this._quadTexCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
0.0, 1.0,
0.0, 0.0,
1.0, 1.0,
1.0, 0.0
]), gl.STATIC_DRAW);
// Create vertex array object (VAO)
this._quadVAO = gl.createVertexArray();
gl.bindVertexArray(this._quadVAO);
// Set up position attribute
gl.bindBuffer(gl.ARRAY_BUFFER, this._quadPositionBuffer);
gl.enableVertexAttribArray(this._positionLocation);
gl.vertexAttribPointer(this._positionLocation, 3, gl.FLOAT, false, 0, 0);
// Set up texcoord attribute
gl.bindBuffer(gl.ARRAY_BUFFER, this._quadTexCoordBuffer);
gl.enableVertexAttribArray(this._texCoordLocation);
gl.vertexAttribPointer(this._texCoordLocation, 2, gl.FLOAT, false, 0, 0);
// Unbind VAO
gl.bindVertexArray(null);
}
// Set clear color and clear the screen
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
// Use the fullscreen quad program
gl.useProgram(this._fullscreenQuadProgram);
// Bind the VAO
gl.bindVertexArray(this._quadVAO);
// Bind the offscreen texture
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, this.offscreenTexture);
gl.uniform1i(this._textureLocation, 0);
// Draw the quad
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
// Unbind VAO and texture
gl.bindVertexArray(null);
gl.bindTexture(gl.TEXTURE_2D, null);
}
/**
* Helper method to create a shader
* @param {WebGL2RenderingContext} gl - WebGL context
* @param {number} type - Shader type (gl.VERTEX_SHADER or gl.FRAGMENT_SHADER)
* @param {string} source - Shader source code
* @returns {WebGLShader} Compiled shader
* @private
*/
_createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('Shader compilation error:', gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
/**
* Helper method to create a shader program
* @param {WebGL2RenderingContext} gl - WebGL context
* @param {WebGLShader} vertexShader - Vertex shader
* @param {WebGLShader} fragmentShader - Fragment shader
* @returns {WebGLProgram} Linked shader program
* @private
*/
_createProgram(gl, vertexShader, fragmentShader) {
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('Program linking error:', gl.getProgramInfoLog(program));
gl.deleteProgram(program);
return null;
}
return program;
}
/**
* Schedules tile downloads based on current view.
* @param {Object} [transform] - Optional transform override, defaults to current camera transform
* @private
*/
prefetch(transform) {
if (!transform)
transform = this.camera.getGlCurrentTransform(performance.now());
for (let id in this.layers) {
let layer = this.layers[id];
//console.log(layer);
//console.log(layer.layout.status);
if (layer.visible && layer.status == 'ready') {
layer.prefetch(transform, this.camera.glViewport());
}
}
}
/**
* Cleanup resources when canvas is no longer needed
*/
dispose() {
const gl = this.gl;
// Clean up offscreen framebuffer resources
if (this.useOffscreenFramebuffer) {
if (this.offscreenFramebuffer) {
gl.deleteFramebuffer(this.offscreenFramebuffer);
this.offscreenFramebuffer = null;
}
if (this.offscreenTexture) {
gl.deleteTexture(this.offscreenTexture);
this.offscreenTexture = null;
}
if (this.offscreenRenderbuffer) {
gl.deleteRenderbuffer(this.offscreenRenderbuffer);
this.offscreenRenderbuffer = null;
}
}
// Clean up fullscreen quad resources
if (this._fullscreenQuadProgram) {
gl.deleteProgram(this._fullscreenQuadProgram);
this._fullscreenQuadProgram = null;
}
if (this._quadVAO) {
gl.deleteVertexArray(this._quadVAO);
this._quadVAO = null;
}
if (this._quadPositionBuffer) {
gl.deleteBuffer(this._quadPositionBuffer);
this._quadPositionBuffer = null;
}
if (this._quadTexCoordBuffer) {
gl.deleteBuffer(this._quadTexCoordBuffer);
this._quadTexCoordBuffer = null;
}
// Clean up layers
for (const id in this.layers) {
this.removeLayer(this.layers[id]);
}
}
}
/**
* Fired when canvas content is updated (layer changes, camera moves).
* @event Canvas#update
*/
/**
* Fired when canvas or layout size changes.
* @event Canvas#updateSize
*/
/**
* Fired when all layers are initialized and ready to display.
* @event Canvas#ready
*/
addSignals(Canvas, 'update', 'updateSize', 'ready');
export { Canvas }