import {Canvas} from '@xeokit/xeokit-sdk/src/viewer/scene/canvas/Canvas.js'

public class | source

Canvas

Extends:

Component → Canvas

Manages its Scene's HTML canvas.

Provides the HTML canvas element in Canvas#canvas.
Has a Spinner, provided at Canvas#spinner, which manages the loading progress indicator.

Member Summary

Public Members
public get	backgroundColor: Number[] Gets the canvas clear color.
public set	backgroundColor: Number[] Sets the canvas clear color.
public get	backgroundColorFromAmbientLight: Boolean Gets whether the canvas clear color will be derived from AmbientLight or Canvas#backgroundColor when Canvas#transparent is `true`.
public set	backgroundColorFromAmbientLight: Boolean Sets if the canvas background color is derived from an AmbientLight.
public	boundary: Number[] Boundary of the Canvas in absolute browser window coordinates.
public	canvas: HTMLCanvasElement The HTML canvas.
public	contextAttr: {}\|* Attributes for the WebGL context
public	gl: WebGLRenderingContext The WebGL rendering context.
public get	resolutionScale: * \| number: * Gets the scale of the canvas back buffer relative to the CSS-defined size of the canvas.
public set	resolutionScale(resolutionScale: * \| number) Sets the scale of the canvas back buffer relative to the CSS-defined size of the canvas.
public get	spinner: * The busy Spinner for this Canvas.
public	transparent: Boolean Indicates if this Canvas is transparent.
public	webgl2: Boolean True when WebGL 2 support is enabled.

Method Summary

Public Methods
public	destroy()
public	loseWebGLContext() Simulates lost WebGL context.
public	readPixels(pixels: Number[], colors: Number[], size: Number, opaqueOnly: Boolean): * Reads colors of pixels from the last rendered frame.

Inherited Summary

From class Component
public get	owner: Component The Component that owns the lifecycle of this Component, if any.
public	destroyed: Boolean True as soon as this Component has been destroyed
public	id: String \| Number ID of this Component, unique within the Scene.
public	meta: * Arbitrary, user-defined metadata on this component.
public	scene: Scene The parent Scene that contains this Component.
public	viewer: Viewer The viewer that contains this Scene.
public	clear() Destroys all Components that are owned by this.
public	destroy() Destroys this component.
public	error(message: String) Logs an error for this component to the JavaScript console.
public	fire(event: String, value: Object, forget: Boolean) Fires an event on this component.
public	hasSubs(event: String): Boolean Returns true if there are any subscribers to the given event on this component.
public	isType(type: ): : Boolean Tests if this component is of the given type, or is a subclass of the given type.
public	log(message: String) Logs a console debugging message for this component.
public	off(subId: String) Cancels an event subscription that was previously made with Component#on or Component#once.
public	on(event: String, callback: Function, scope: Object): String Subscribes to an event on this component.
public	once(event: String, callback: Function, scope: Object) Subscribes to the next occurrence of the given event, then un-subscribes as soon as the event is subIdd.
public	scheduleTask(task: *) Schedule a task to perform on the next browser interval
public	warn(message: String) Logs a warning for this component to the JavaScript console.

Public Members

public get backgroundColor: Number[] source

Gets the canvas clear color.

Default value is [1, 1, 1].

public set backgroundColor: Number[] source

Sets the canvas clear color.

Default value is [1, 1, 1].

public get backgroundColorFromAmbientLight: Boolean source

Gets whether the canvas clear color will be derived from AmbientLight or Canvas#backgroundColor when Canvas#transparent is true.

When Canvas#transparent is true and this is true, then the canvas clear color will be taken from the Scene's ambient light color.

When Canvas#transparent is true and this is false, then the canvas clear color will be taken from Canvas#backgroundColor.

Default value is true.

public set backgroundColorFromAmbientLight: Boolean source

Sets if the canvas background color is derived from an AmbientLight.

This only has effect when the canvas is not transparent. When not enabled, the background color will be the canvas element's HTML/CSS background color.

Default value is true.

public boundary: Number[] source

Boundary of the Canvas in absolute browser window coordinates.

Usage:

var boundary = myScene.canvas.boundary;

var xmin = boundary[0];
var ymin = boundary[1];
var width = boundary[2];
var height = boundary[3];

Properties:

Name	Type	Attribute	Description
boundary	*

public canvas: HTMLCanvasElement source

The HTML canvas.

Properties:

Name	Type	Attribute	Description
canvas	*

public contextAttr: {}|* source

Attributes for the WebGL context

public gl: WebGLRenderingContext source

The WebGL rendering context.

Properties:

Name	Type	Attribute	Description
gl	*

public get resolutionScale: * | number: * source

Gets the scale of the canvas back buffer relative to the CSS-defined size of the canvas.

This is a common way to trade off rendering quality for speed. If the canvas size is defined in CSS, then setting this to a value between [0..1] (eg 0.5) will render into a smaller back buffer, giving a performance boost.

Return:

* | number

The resolution scale.

public set resolutionScale(resolutionScale: * | number) source

Sets the scale of the canvas back buffer relative to the CSS-defined size of the canvas.

public get spinner: * source

The busy Spinner for this Canvas.

Properties:

Name	Type	Attribute	Description
spinner	*

public transparent: Boolean source

Indicates if this Canvas is transparent.

Properties:

Name	Type	Attribute	Description
transparent	*

public webgl2: Boolean source

True when WebGL 2 support is enabled.

Properties:

Name	Type	Attribute	Description
webgl2	*

Public Methods

public destroy() source

Destroys this component.

Override:

Component#destroy

public loseWebGLContext() source

Simulates lost WebGL context.

public readPixels(pixels: Number[], colors: Number[], size: Number, opaqueOnly: Boolean): * source

Reads colors of pixels from the last rendered frame.

Call this method like this:


// Ignore transparent pixels (default is false)
var opaqueOnly = true;

var colors = new Float32Array(8);

viewer.scene.canvas.readPixels([ 100, 22, 12, 33 ], colors, 2, opaqueOnly);

Then the r,g,b components of the colors will be set to the colors at those pixels.

Params:

Name	Type	Attribute	Description
pixels	Number[]
colors	Number[]
size	Number
opaqueOnly	Boolean