Skip to main content

CanvasMedia

CanvasMedia is designed for pre-rendering media into a canvas layer. It does not replace video or image playback, but prepares rasterized content for performant reuse in animations, effects, and transitions.

Basic Demo​

Initialization​

caution
  • The provided media must be fully loaded before initialization.
  • CanvasMedia does not handle media loading internally.

Create a CanvasMedia instance and prerender an image inside it:

const instance = new CanvasMedia({
  container: document.getElementById('container'),
  media: document.querySelector('img'),
  append: false,
});

Or video:

const instance = new CanvasMedia({
  container: document.getElementById('container'),
  media: document.querySelector('video'),
  append: true,
});

Handle when your resource is rendered:

instance.on('render', () => {
  console.log('do something with your canvas', instance.canvas);
});

Destroy the canvas:

instance.destroy();

Best Practices​

  • Ensure media is loaded (img.complete, video.readyState >= 2) before creating CanvasMedia.
  • Use CanvasMedia for visual reuse, not as a replacement for <video> playback.
  • Disable autoRenderVideo if you control rendering manually or need lower CPU usage.
  • Prefer rule: "cover" for full-background visuals and "contain" for preserving aspect ratio.
  • Combine CanvasMedia with Canvas or Raf utilities for animation pipelines.