CanvasMedia

The CanvasMedia class enables pre-rendering of media assets (such as images and videos) onto a canvas. This technique optimizes performance by reducing payload size and preparing media for further efficient use.

Example

Explore a live example in CodePen:

Props

note

All Canvas' props are available in this class.

Static Props

Static properties are set during initialization and cannot be modified later.

Name	Description	Type	Default Value
media	The media element to be rendered. Accepts a Canvas instance or common media elements like images and videos.	Canvas HTMLImageElement SVGImageElement HTMLVideoElement HTMLCanvasElement
autoRenderVideo	If true, video elements will automatically render on each frame update.	boolean	true

Mutable Props

Mutable properties may be changed in runtime via .updateProps

Name	Description	Type	Default Value
rule	Defines how the media element is positioned within the canvas.	cover contain top-left top-right bottom-left bottom-right center	'cover'

Accessors

note

All Canvas' accessors are available in this class.

Methods

note

All Canvas' methods are available in this class.

render

Pre-renders the media resource onto the canvas.

instance.render();

Callbacks

note

All Canvas' callbacks are available in this class.

render

Fires after the media element has been rendered onto the canvas.

const destruct = instance.on('render', () => console.log('Canvas rendered'));

// Cancel the callback
destruct();