Skip to main content

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.
const canvas = new CanvasMedia({
  media: document.querySelector("img")
});

autoRenderVideo​

  • Type: boolean
  • Default: true
  • If enabled, video frames are continuously re-rendered to the canvas.
    Disable this option if you render manually or need to optimize performance.
const canvas = new CanvasMedia({
  media: document.querySelector("video"),
  autoRenderVideo: false,
});

Mutable Props​

Mutable properties can be changed at 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.
const canvas = new CanvasMedia({
  media: document.querySelector("video"),
  rule: "contain",
});

// change value
canvas.updateProps({
  rule: "bottom-right",
});