Skip to main content

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.

media​

  • Type:
    • Canvas
    • HTMLImageElement
    • SVGImageElement
    • HTMLVideoElement
    • HTMLCanvasElement
  • The media element to be rendered. Accepts a Canvas instance or common media elements like images and videos.

autoRenderVideo​

  • Type: boolean
  • Default: true
  • If true, video elements will automatically render on each frame update.

Mutable Props​

Mutable properties may be changed in runtime via .updateProps

rule​

  • Type:
    • cover
    • contain
    • top-left
    • top-right
    • bottom-left
    • bottom-right
    • center
  • Default: 'cover'
  • Defines how the media element is positioned within the canvas.

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();