A Canvas manages a Viewer's HTML canvas and its WebGL context.

Overview

• Each Viewer provides a Canvas as a read-only property on itself.
• When a Viewer is configured with the ID of an existing HTMLCanvasElement, then the Canvas will bind to that, otherwise the Canvas will automatically create its own.
• A Canvas will fire a resized event whenever the HTMLCanvasElement resizes.
• A Canvas is responsible for obtaining a WebGL context from the HTMLCanvasElement.
• A Canvas also fires a webglContextLost event when the WebGL context is lost, and a webglContextRestored when it is restored again.
• The various components within the parent Viewer will transparently recover on the webglContextRestored event.

Example

In the example below, we're creating a Viewer without specifying an HTML canvas element for it. This causes the Viewer's Canvas component to create its own default element within the page. Then we subscribe to various events fired by that Canvas component.

var viewer = new BIMSURFER.Viewer();

// Get the Canvas off the Viewer
// Since we did not configure the Viewer with the ID of a DOM canvas element,
// the Canvas will create its own canvas element in the DOM
var canvas = viewer.canvas;

// Get the WebGL context off the Canvas
var gl = canvas.gl;

// Subscribe to Canvas resize events
canvas.on("resize", function(e) {
       var width = e.width;
       var height = e.height;
       var aspect = e.aspect;
       //...
    });

// Subscribe to WebGL context loss events on the Canvas
canvas.on("webglContextLost", function() {
       //...
    });

// Subscribe to WebGL context restored events on the Canvas
canvas.on("webglContextRestored", function(gl) {
       var newContext = gl;
       //...
    });