node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



Paint video on canvas. Extra light.

gzipped size Travis build status gzipped size

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.


  • It automatically starts and pauses painting with and video.pause().
  • If the video is paused or in a background tab, nothing is painted.
  • It automatically creates a canvas element from your video (optional).
  • It automatically resizes the canvas to match your video (optional).


npm install --save video-canvas
var videoCanvas = require('video-canvas');
import videoCanvas from 'video-canvas';


Simple usage:

const video = document.querySelector('video');
const canvas = videoCanvas(video); // returns the <canvas> element

Provide your own canvas:

videoCanvas(video, {
    canvas: document.querySelector('.your-own-canvas'),

By default, video-canvas will automatically match the canvas size to the video size, whenever that changes. If you want to prevent this behavior, pass updateSize: false

const canvas = videoCanvas(video, {
    updateSize: false

If you want to customize the draw call, pass your drawing 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


MIT © Federico Brigante