Skip to content
Engeenee
Blog

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

Constructors

new ResponsiveCanvas()

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