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.

Extends

• EventEmitterT<CanvasEvents>

Constructors

Constructor

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

Constructor

Parameters

container

HTMLElement

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

Returns

ResponsiveCanvas

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): this

Adds the listener function to the end of the listeners array

Type Parameters

E

E extends "resize"

Parameters

event

E

The name of the event

listener

CanvasEvents[E]

The callback function

Returns

this

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

E

E extends "resize"

Parameters

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

---

getMirror()

getMirror(): boolean

Get mirror mode

Returns

boolean

Current mirror mode

---

getMode()

getMode(): CanvasMode

Get fitting mode

Returns

CanvasMode

Current fitting mode

---

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

entries

ResizeObserverEntry[]

Elements being resized

Returns

void

---

listenerCount()

listenerCount<E>(event): number

The number of listeners listening to the event

Type Parameters

E

E extends "resize"

Parameters

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

E

E extends "resize"

Parameters

event

E

The name of the event

Returns

Function[]

Copy of the listeners array

Inherited from

EventEmitterT.listeners

---

off()

off<E>(event, listener): this

Removes the listener from the listener array for the event

Type Parameters

E

E extends "resize"

Parameters

event

E

The name of the event

listener

CanvasEvents[E]

The callback function

Returns

this

This EventEmitter

Inherited from

EventEmitterT.off

---

on()

on<E>(event, listener): this

Adds the listener function to the event

Type Parameters

E

E extends "resize"

Parameters

event

E

The name of the event

listener

CanvasEvents[E]

The callback function

Returns

this

This EventEmitter

Inherited from

EventEmitterT.on

---

once()

once<E>(event, listener): this

Adds a one-time listener function for the event

Type Parameters

E

E extends "resize"

Parameters

event

E

The name of the event

listener

CanvasEvents[E]

The callback function

Returns

this

This EventEmitter

Inherited from

EventEmitterT.once

---

prependListener()

prependListener<E>(event, listener): this

Adds the listener function to the beginning of the listeners array

Type Parameters

E

E extends "resize"

Parameters

event

E

The name of the event

listener

CanvasEvents[E]

The callback function

Returns

this

This EventEmitter

Inherited from

EventEmitterT.prependListener

---

prependOnceListener()

prependOnceListener<E>(event, listener): this

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

Type Parameters

E

E extends "resize"

Parameters

event

E

The name of the event

listener

CanvasEvents[E]

The callback function

Returns

this

Inherited from

EventEmitterT.prependOnceListener

---

rawListeners()

rawListeners<E>(event): Function[]

Copy of the array of listeners for the event including wrappers

Type Parameters

E

E extends "resize"

Parameters

event

E

The name of the event

Returns

Function[]

Copy of the listeners array

Inherited from

EventEmitterT.rawListeners

---

removeAllListeners()

removeAllListeners<E>(event?): this

Removes all listeners, or those of the specified event

Type Parameters

E

E extends "resize"

Parameters

event?

E

The name of the event

Returns

this

This EventEmitter

Inherited from

EventEmitterT.removeAllListeners

---

removeListener()

removeListener<E>(event, listener): this

Removes the specified listener from the listener array

Type Parameters

E

E extends "resize"

Parameters

event

E

The name of the event

listener

CanvasEvents[E]

The callback function

Returns

this

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

ratio

number

Aspect ratio

Returns

void

---

setMaxListeners()

setMaxListeners(n): this

Sets maximum number of listeners per event

Parameters

n

number

Maximum number of listeners

Returns

this

This EventEmitter

Inherited from

EventEmitterT.setMaxListeners

---

setMirror()

setMirror(mirror): void

Set mirror mode

ResponsiveCanvas mirrors the output layers.

Parameters

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

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

containerRatio

number

Aspect ratio of the container

Returns

void