How to record a canvas to video

You can use HTML canvas to produce videos! The following function, given a canvas and a video length in milliseconds, serves a video.webm to the viewer for download:

function recordCanvas(canvas, videoLength) {
  const recordedChunks = [];
  const mediaRecorder = new MediaRecorder(
    canvas.captureStream(25), {mimeType: 'video/webm; codecs=vp9'});
  mediaRecorder.ondataavailable =
    event => recordedChunks.push(;
  mediaRecorder.onstop = () => {
    const url = URL.createObjectURL(
      new Blob(recordedChunks, {type: "video/webm"}));
    const anchor = document.createElement("a");
    anchor.href = url; = "video.webm";;
  window.setTimeout(() => {mediaRecorder.stop();}, 3000);

Here’s an example of usage. I’ve set up the following canvas to show a silly animation of a square wandering around the canvas at random. To record a 3-second snippet of the canvas and download it as a video, click here: .

Tagged #media-recorder-api, #canvas, #video, #webm, #download, #javascript, #web, #html, #programming.

Similar posts

More by Jim

Want to build a fantastic product using LLMs? I work at Granola where we're building the future IDE for knowledge work. Come and work with us! Read more or get in touch!

This page copyright James Fisher 2020. Content is not associated with my employer. Found an error? Edit this page.