Interface: Canvas

Defined in: types/desktop-engine.d.ts:946

Canvas component (implemented with OpenGL ES/ANGLE on Metal); defaults to 300x150 when no style is given. On Macs whose GPU doesn't support Metal every getContext returns null and CanvasImage fails to load.

Extends

• ComponentBase<CanvasEventMap>

Properties

children

readonly children: AnyComponent[];

Defined in: types/desktop-engine.d.ts:597

Array of child components (each read returns a new array)

Inherited from

ComponentBase.children

---

height

height: number;

Defined in: types/desktop-engine.d.ts:950

Drawing buffer height (pixels, 2 to 16383); uses the layout height if unset

Overrides

ComponentBase.height

---

identifier

readonly identifier: string;

Defined in: types/desktop-engine.d.ts:588

Unique identifier of the native component (a pointer string)

Inherited from

ComponentBase.identifier

---

onclick

onclick: 
  | EventHandler<Canvas, ClickPayload>
  | null
  | undefined;

Defined in: types/desktop-engine.d.ts:608

click callback

Inherited from

ComponentBase.onclick

---

oncontextlost

oncontextlost: 
  | EventHandler<Canvas, ContextLostPayload>
  | null
  | undefined;

Defined in: types/desktop-engine.d.ts:963

contextlost callback

---

ondbclick

ondbclick: 
  | EventHandler<Canvas, ClickPayload>
  | null
  | undefined;

Defined in: types/desktop-engine.d.ts:610

dbclick (double-click) callback

Inherited from

ComponentBase.ondbclick

---

onframechange

onframechange: 
  | EventHandler<Canvas, FrameChangePayload>
  | null
  | undefined;

Defined in: types/desktop-engine.d.ts:606

framechange callback

Inherited from

ComponentBase.onframechange

---

onmousedown

onmousedown: 
  | EventHandler<Canvas, MousePayload>
  | null
  | undefined;

Defined in: types/desktop-engine.d.ts:612

mousedown callback

Inherited from

ComponentBase.onmousedown

---

onmouseenter

onmouseenter: 
  | EventHandler<Canvas, MousePayload>
  | null
  | undefined;

Defined in: types/desktop-engine.d.ts:616

mouseenter callback

Inherited from

ComponentBase.onmouseenter

---

onmouseleave

onmouseleave: 
  | EventHandler<Canvas, MousePayload>
  | null
  | undefined;

Defined in: types/desktop-engine.d.ts:618

mouseleave callback

Inherited from

ComponentBase.onmouseleave

---

onmousemove

onmousemove: 
  | EventHandler<Canvas, MousePayload>
  | null
  | undefined;

Defined in: types/desktop-engine.d.ts:620

mousemove callback, also while a press that began on the component is dragged, unless the press moves the window (see Window.dragRegion)

Inherited from

ComponentBase.onmousemove

---

onmouseup

onmouseup: 
  | EventHandler<Canvas, MousePayload>
  | null
  | undefined;

Defined in: types/desktop-engine.d.ts:614

mouseup callback

Inherited from

ComponentBase.onmouseup

---

onwebglcontextlost

onwebglcontextlost: 
  | EventHandler<Canvas, ContextLostPayload>
  | null
  | undefined;

Defined in: types/desktop-engine.d.ts:961

webglcontextlost callback

---

onwheel

onwheel: 
  | EventHandler<Canvas, WheelPayload>
  | null
  | undefined;

Defined in: types/desktop-engine.d.ts:622

wheel callback

Inherited from

ComponentBase.onwheel

---

width

width: number;

Defined in: types/desktop-engine.d.ts:948

Drawing buffer width (pixels, 2 to 16383); uses the layout width if unset. The style only sets the displayed size: the buffer is stretched over it, like on the web

Overrides

ComponentBase.width

Accessors

style

Get Signature

get style(): ComponentStyle;

Defined in: types/desktop-engine.d.ts:590

Reading returns the style object; assigning an object replaces the whole style

Returns

ComponentStyle

Set Signature

set style(value): void;

Defined in: types/desktop-engine.d.ts:591

Parameters

Parameter	Type
value	StyleProperties

Returns

void

Inherited from

ComponentBase.style

Methods

addEventListener()

addEventListener<K>(type, listener): void;

Defined in: types/desktop-engine.d.ts:128

Adds an event listener; type may be given with or without the on prefix

Type Parameters

Type Parameter
K extends | "framechange" | "click" | "dbclick" | "mousedown" | "mouseup" | "mouseenter" | "mouseleave" | "mousemove" | "wheel" | "webglcontextlost" | "contextlost"

Parameters

Parameter	Type
type	K | `on${K}`
listener	EventHandler<Canvas, CanvasEventMap[K]>

Returns

void

Inherited from

ComponentBase.addEventListener

---

appendChild()

appendChild(child, index?): void;

Defined in: types/desktop-engine.d.ts:599

Adds a child component at index (0 to the number of children); omit it or pass -1 to append at the end. Throws a RangeError for other indexes; a Window can't be a child

Parameters

Parameter	Type
child	AnyComponent
index?	number

Returns

void

Inherited from

ComponentBase.appendChild

---

destroy()

destroy(): void;

Defined in: types/desktop-engine.d.ts:132

Clears all event listeners and on callbacks so the object can be garbage-collected; components also process their children recursively

Returns

void

Inherited from

ComponentBase.destroy

---

getContext()

Call Signature

getContext(type, options?): 
  | CanvasRenderingContext2D
  | null;

Defined in: types/desktop-engine.d.ts:952

Gets a 2D context; a canvas can use only one kind of context, and switching returns null

Parameters

Parameter	Type
type	"2d"
options?	CanvasContextOptions

Returns

| CanvasRenderingContext2D | null

Call Signature

getContext(type, options?): 
  | WebGLRenderingContext
  | null;

Defined in: types/desktop-engine.d.ts:954

Gets a WebGL 1 context (a name containing webgl that isn't webgl2, such as experimental-webgl)

Parameters

Parameter	Type
type	"webgl" | "experimental-webgl"
options?	CanvasContextOptions

Returns

| WebGLRenderingContext | null

Call Signature

getContext(type, options?): 
  | WebGL2RenderingContext
  | null;

Defined in: types/desktop-engine.d.ts:956

Gets a WebGL 2 context (exactly 'webgl2'), backed by an OpenGL ES 3.0 ANGLE context

Parameters

Parameter	Type
type	"webgl2"
options?	CanvasContextOptions

Returns

| WebGL2RenderingContext | null

Call Signature

getContext(type, options?): 
  | CanvasRenderingContext2D
  | WebGLRenderingContext
  | WebGL2RenderingContext
  | null;

Defined in: types/desktop-engine.d.ts:958

Returns null for unsupported types (such as experimental-webgl2 or webgpu)

Parameters

Parameter	Type
type	string
options?	CanvasContextOptions

Returns

| CanvasRenderingContext2D | WebGLRenderingContext | WebGL2RenderingContext | null

---

offclick()

offclick(): void;

Defined in: types/desktop-engine.d.ts:626

Removes the onclick callback

Returns

void

Inherited from

ComponentBase.offclick

---

offcontextlost()

offcontextlost(): void;

Defined in: types/desktop-engine.d.ts:967

Removes the oncontextlost callback

Returns

void

---

offdbclick()

offdbclick(): void;

Defined in: types/desktop-engine.d.ts:628

Removes the ondbclick callback

Returns

void

Inherited from

ComponentBase.offdbclick

---

offframechange()

offframechange(): void;

Defined in: types/desktop-engine.d.ts:624

Removes the onframechange callback

Returns

void

Inherited from

ComponentBase.offframechange

---

offmousedown()

offmousedown(): void;

Defined in: types/desktop-engine.d.ts:630

Removes the onmousedown callback

Returns

void

Inherited from

ComponentBase.offmousedown

---

offmouseenter()

offmouseenter(): void;

Defined in: types/desktop-engine.d.ts:634

Removes the onmouseenter callback

Returns

void

Inherited from

ComponentBase.offmouseenter

---

offmouseleave()

offmouseleave(): void;

Defined in: types/desktop-engine.d.ts:636

Removes the onmouseleave callback

Returns

void

Inherited from

ComponentBase.offmouseleave

---

offmousemove()

offmousemove(): void;

Defined in: types/desktop-engine.d.ts:638

Removes the onmousemove callback

Returns

void

Inherited from

ComponentBase.offmousemove

---

offmouseup()

offmouseup(): void;

Defined in: types/desktop-engine.d.ts:632

Removes the onmouseup callback

Returns

void

Inherited from

ComponentBase.offmouseup

---

offwebglcontextlost()

offwebglcontextlost(): void;

Defined in: types/desktop-engine.d.ts:965

Removes the onwebglcontextlost callback

Returns

void

---

offwheel()

offwheel(): void;

Defined in: types/desktop-engine.d.ts:640

Removes the onwheel callback

Returns

void

Inherited from

ComponentBase.offwheel

---

remove()

remove(): void;

Defined in: types/desktop-engine.d.ts:603

Removes this component from its parent

Returns

void

Inherited from

ComponentBase.remove

---

removeChild()

removeChild(child): void;

Defined in: types/desktop-engine.d.ts:601

Removes a child component; throws if it isn't a child of this component

Parameters

Parameter	Type
child	AnyComponent

Returns

void

Inherited from

ComponentBase.removeChild

---

removeEventListener()

removeEventListener<K>(type, listener): void;

Defined in: types/desktop-engine.d.ts:130

Removes the given event listener

Type Parameters

Type Parameter
K extends | "framechange" | "click" | "dbclick" | "mousedown" | "mouseup" | "mouseenter" | "mouseleave" | "mousemove" | "wheel" | "webglcontextlost" | "contextlost"

Parameters

Parameter	Type
type	K | `on${K}`
listener	EventHandler<Canvas, CanvasEventMap[K]>

Returns

void

Inherited from

ComponentBase.removeEventListener