Skip to main content

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

Constructors

constructor

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

Constructor

Parameters

NameTypeDefault valueDescription
containerHTMLElementundefinedContainer of responsive canvas
modeCanvasMode"crop"Fitting mode
layerCountnumber1Number of canvas layers
mirrorbooleanfalseMirror the output
aspectRationumber1Target 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

NameType
Eextends "resize"

Parameters

NameTypeDescription
eventEThe name of the event
listenerCanvasEvents[E]The callback function

Returns

ResponsiveCanvas

This EventEmitter

Inherited from

EventEmitterT.addListener


emit

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

Synchronously calls each of the listeners registered for the event

Type parameters

NameType
Eextends "resize"

Parameters

NameTypeDescription
eventEThe name of the event
...argsArgs<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

NameTypeDescription
entriesResizeObserverEntry[]Elements being resized

Returns

void


listenerCount

listenerCount<E>(event): number

The number of listeners listening to the event

Type parameters

NameType
Eextends "resize"

Parameters

NameTypeDescription
eventEThe 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

NameType
Eextends "resize"

Parameters

NameTypeDescription
eventEThe 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

NameType
Eextends "resize"

Parameters

NameTypeDescription
eventEThe name of the event
listenerCanvasEvents[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

NameType
Eextends "resize"

Parameters

NameTypeDescription
eventEThe name of the event
listenerCanvasEvents[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

NameType
Eextends "resize"

Parameters

NameTypeDescription
eventEThe name of the event
listenerCanvasEvents[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

NameType
Eextends "resize"

Parameters

NameTypeDescription
eventEThe name of the event
listenerCanvasEvents[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

NameType
Eextends "resize"

Parameters

NameTypeDescription
eventEThe name of the event
listenerCanvasEvents[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

NameType
Eextends "resize"

Parameters

NameTypeDescription
eventEThe 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

NameType
Eextends "resize"

Parameters

NameTypeDescription
event?EThe 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

NameType
Eextends "resize"

Parameters

NameTypeDescription
eventEThe name of the event
listenerCanvasEvents[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

NameTypeDescription
rationumberAspect ratio

Returns

void


setMaxListeners

setMaxListeners(n): ResponsiveCanvas

Sets maximum number of listeners per event

Parameters

NameTypeDescription
nnumberMaximum number of listeners

Returns

ResponsiveCanvas

This EventEmitter

Inherited from

EventEmitterT.setMaxListeners


setMirror

setMirror(mirror): void

Set mirror mode

ResponsiveCanvas mirrors the output layers.

Parameters

NameType
mirrorboolean

Returns

void


setMode

setMode(mode): void

Set fitting mode

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

Parameters

NameTypeDescription
modeCanvasModeFitting 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

NameTypeDescription
containerRationumberAspect ratio of the container

Returns

void