Class: ResponsiveCanvas

@geenee/armature.ResponsiveCanvas

Responsive canvas

Responsive canvas is useful helper for applications doing rendering. It creates canvas layers within any html element. Layers preserve aspect ratio according to fitting mode. Ratio of canvas usually follows the ratio of the input video. In "crop" mode canvases are cropped to have the same aspect ratio as the container and scaled to fill the whole area. This is default mode preferred in most cases. In "fit mode" canvases are scaled down to fit into the container and leaving margins to stay in the center, "pad" mode behavior is the same, but margins are filled with highly blurred parts of the input video instead of still background. ResponsiveCanvas tracks size changes of container and updates layers and margins to preserve aspect ratio.

Hierarchy

• EventEmitterT<CanvasEvents>

  ↳ ResponsiveCanvas

Constructors

constructor

• new ResponsiveCanvas(container, mode?, layerCount?, mirror?, aspectRatio?)

Constructor

Parameters

Name	Type	Default value	Description
container	HTMLElement	undefined	Container of responsive canvas
mode	CanvasMode	"crop"	Fitting mode
layerCount	number	1	Number of canvas layers
mirror	boolean	false	Mirror the output
aspectRatio	number	1	Target aspect ratio

Overrides

EventEmitterT.constructor

Properties

aspectRatio

• Protected aspectRatio: number = 1

Target aspect ratio

---

container

• Protected container: HTMLElement

Container of responsive canvas

---

layerCount

• Protected layerCount: number = 1

Number of canvas layers

---

layers

• layers: HTMLCanvasElement[] = []

Canvas layers

---

mirror

• Protected mirror: boolean = false

Mirror the output

---

mode

• Protected mode: CanvasMode = "crop"

Fitting mode

---

observer

• Protected Optional observer: ResizeObserver

Resize observer

---

pads

• Optional pads: [HTMLCanvasElement, HTMLCanvasElement]

Padding canvases

---

padsSize

• padsSize: [number, number]

Relative size of padding canvases

Methods

addListener

▸ addListener<E>(event, listener): ResponsiveCanvas

Adds the listener function to the end of the listeners array

Type parameters

Name	Type
E	extends "resize"

Parameters

Name	Type	Description
event	E	The name of the event
listener	CanvasEvents[E]	The callback function

Returns

ResponsiveCanvas

This EventEmitter

Inherited from

EventEmitterT.addListener

---

dispose

▸ dispose(): void

Dispose responsive canvas

Destructs all canvas layers and other instances created by responsive canvas. Object must not be used after dispose() method has been called.

Returns

void

---

emit

▸ emit<E>(event, ...args): boolean

Synchronously calls each of the listeners registered for the event

Type parameters

Name	Type
E	extends "resize"

Parameters

Name	Type	Description
event	E	The name of the event
...args	Args<CanvasEvents[E]>	Arguments passed to the listeners

Returns

boolean

True if the event had listeners, False otherwise

Inherited from

EventEmitterT.emit

---

eventNames

▸ eventNames(): (string | symbol)[]

List of emitter's events

Returns

(string | symbol)[]

List of emitter's events

Inherited from

EventEmitterT.eventNames

---

getMaxListeners

▸ getMaxListeners(): number

Maximum number of listeners per event

Returns

number

Maximum number of listeners per event

Inherited from

EventEmitterT.getMaxListeners

---

handleResize

▸ Protected handleResize(entries): void

Resize event callback

Callback attached to resize observer to handle size updates. Basically, it calls updateSizes() to adjust canvas sizes.

Parameters

Name	Type	Description
entries	ResizeObserverEntry[]	Elements being resized

Returns

void

---

listenerCount

▸ listenerCount<E>(event): number

The number of listeners listening to the event

Type parameters

Name	Type
E	extends "resize"

Parameters

Name	Type	Description
event	E	The name of the event

Returns

number

Number of listeners

Inherited from

EventEmitterT.listenerCount

---

listeners

▸ listeners<E>(event): Function[]

Copy of the array of listeners for the event

Type parameters

Name	Type
E	extends "resize"

Parameters

Name	Type	Description
event	E	The name of the event

Returns

Function[]

Copy of the listeners array

Inherited from

EventEmitterT.listeners

---

off

▸ off<E>(event, listener): ResponsiveCanvas

Removes the listener from the listener array for the event

Type parameters

Name	Type
E	extends "resize"

Parameters

Name	Type	Description
event	E	The name of the event
listener	CanvasEvents[E]	The callback function

Returns

ResponsiveCanvas

This EventEmitter

Inherited from

EventEmitterT.off

---

on

▸ on<E>(event, listener): ResponsiveCanvas

Adds the listener function to the event

Type parameters

Name	Type
E	extends "resize"

Parameters

Name	Type	Description
event	E	The name of the event
listener	CanvasEvents[E]	The callback function

Returns

ResponsiveCanvas

This EventEmitter

Inherited from

EventEmitterT.on

---

once

▸ once<E>(event, listener): ResponsiveCanvas

Adds a one-time listener function for the event

Type parameters

Name	Type
E	extends "resize"

Parameters

Name	Type	Description
event	E	The name of the event
listener	CanvasEvents[E]	The callback function

Returns

ResponsiveCanvas

This EventEmitter

Inherited from

EventEmitterT.once

---

prependListener

▸ prependListener<E>(event, listener): ResponsiveCanvas

Adds the listener function to the beginning of the listeners array

Type parameters

Name	Type
E	extends "resize"

Parameters

Name	Type	Description
event	E	The name of the event
listener	CanvasEvents[E]	The callback function

Returns

ResponsiveCanvas

This EventEmitter

Inherited from

EventEmitterT.prependListener

---

prependOnceListener

▸ prependOnceListener<E>(event, listener): ResponsiveCanvas

Adds a one-time listener function to the beginning of the listeners array

Type parameters

Name	Type
E	extends "resize"

Parameters

Name	Type	Description
event	E	The name of the event
listener	CanvasEvents[E]	The callback function

Returns

ResponsiveCanvas

Inherited from

EventEmitterT.prependOnceListener

---

rawListeners

▸ rawListeners<E>(event): Function[]

Copy of the array of listeners for the event including wrappers

Type parameters

Name	Type
E	extends "resize"

Parameters

Name	Type	Description
event	E	The name of the event

Returns

Function[]

Copy of the listeners array

Inherited from

EventEmitterT.rawListeners

---

removeAllListeners

▸ removeAllListeners<E>(event?): ResponsiveCanvas

Removes all listeners, or those of the specified event

Type parameters

Name	Type
E	extends "resize"

Parameters

Name	Type	Description
event?	E	The name of the event

Returns

ResponsiveCanvas

This EventEmitter

Inherited from

EventEmitterT.removeAllListeners

---

removeListener

▸ removeListener<E>(event, listener): ResponsiveCanvas

Removes the specified listener from the listener array

Type parameters

Name	Type
E	extends "resize"

Parameters

Name	Type	Description
event	E	The name of the event
listener	CanvasEvents[E]	The callback function

Returns

ResponsiveCanvas

This EventEmitter

Inherited from

EventEmitterT.removeListener

---

setAspectRatio

▸ setAspectRatio(ratio): void

Set aspect ratio

Responsive canvas will preserve provided aspect ratio and resize itself within container according to fitting mode.

Parameters

Name	Type	Description
ratio	number	Aspect ratio

Returns

void

---

setMaxListeners

▸ setMaxListeners(n): ResponsiveCanvas

Sets maximum number of listeners per event

Parameters

Name	Type	Description
n	number	Maximum number of listeners

Returns

ResponsiveCanvas

This EventEmitter

Inherited from

EventEmitterT.setMaxListeners

---

setMirror

▸ setMirror(mirror): void

Set mirror mode

ResponsiveCanvas mirrors the output layers.

Parameters

Name	Type	Description
mirror	boolean	Mirror the output

Returns

void

---

setMode

▸ setMode(mode): void

Set fitting mode

Canvas layers preserve aspect ratio according to fitting mode, by cropping, fitting, or padding.

Parameters

Name	Type	Description
mode	CanvasMode	Fitting mode

Returns

void

---

updateSizes

▸ Protected updateSizes(containerRatio): void

Update canvas sizes to preserve aspect ratio

Updates relative sizes of canvas within container to preserve fixed aspect ratio according to fitting mode. Called when container is resized (by resize observer).

Parameters

Name	Type	Description
containerRatio	number	Aspect ratio of the container

Returns

void