node package manager

video-canvas

Paint video on canvas. Extra light.

video-canvas

Paint video on canvas. Extra light.

video-canvas will take care of painting a video on canvas for you. In the easiest of setups, you provide a video and you get a correctly-sized self-updating canvas ready to be used.

video-canvas starts and pauses painting together with the video. If the video is playing, the canvas will be painted, otherwise nothing will be running.

npm install --save video-canvas
import videoCanvas from 'video-canvas';

Simple usage:

const video = document.querySelector('video');
const canvas = videoCanvas(video);
video.play();
video.pause();

Provide your own canvas:

const canvas = videoCanvas(video, {
    canvas: document.querySelector('.your-own-canvas'),
});

By default, video-canvas takes care of matching the canvas size to the video size. If you want to prevent this behavior, pass updateSize: false

const canvas = videoCanvas(video, {
    updateSize: false
});

If you want to make a custom draw call, pass a function as drawCall

const canvas = videoCanvas(video, {
    drawCall: function (ctx, video) {
        ctx.drawImage(video, 0, 0, 100, 100)
    }
});

No dependencies.

  • get-media-size: get the real size of any media: images, videos, canvas and canvas' contexts
  • iphone-inline-video: You don't need canvas to play video inline on the iPhone

No dependencies.

MIT © Federico Brigante