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

Adaptive props

To apply different values by viewport or device, use Responsive with this component as the source. Props will update automatically when breakpoints change.

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',
});