Recording Canvas Animations to Video Using the Media Streams API

When we create animation effects with Canvas, many people resort to screen‑recording tools to capture the playback, but Canvas can directly convert its output to video using the modern Media Streams API supported by browsers.

The Canvas object provides a captureStream method that returns a MediaStream object, which can then be fed into a MediaRecorder to record the canvas content.

Recording Video

First, we write a very simple Canvas animation that rotates a 200 × 200 rectangle around the canvas center:

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const {width, height} = canvas;

ctx.fillStyle = 'red';

function draw(rotation = 0) {
  ctx.clearRect(0, 0, 1000, 1000);
  ctx.save();
  ctx.translate(width / 2, height / 2);
  ctx.rotate(rotation);
  ctx.translate(-width / 2, -height / 2);
  ctx.beginPath();
  ctx.rect(200, 200, 200, 200);
  ctx.fill();
  ctx.restore();
}

function update(t) {
  draw(t / 500);
  requestAnimationFrame(update);
}
update(0);

The animation shows a rotating red square. To record a 6‑second video, we first obtain the MediaStream from the canvas:

const stream = canvas.captureStream();

Then we create a MediaRecorder with the desired MIME type:

const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });

We collect the recorded data in an array via the ondataavailable event:

const data = [];
recorder.ondataavailable = function (event) {
  if (event.data && event.data.size) {
    data.push(event.data);
  }
};

When recording stops, we create a Blob from the collected chunks and set it as the source of a video element on the page:

recorder.onstop = () => {
  const url = URL.createObjectURL(new Blob(data, { type: 'video/webm' }));
  document.querySelector('#videoContainer').style.display = "block";
  document.querySelector('video').src = url;
};

Finally, we start the recorder and schedule it to stop after 6 seconds:

recorder.start();

setTimeout(() => {
  recorder.stop();
}, 6000);

With these steps, the canvas animation is captured as a video without using external screen‑recording software.

We can also combine the recorded video with audio using the WebAssembly version of ffmpeg. The project ffmpeg.wasm enables ffmpeg in the browser, and a convenient wrapper canvas2video provides examples such as this CodePen .

Summary

In scenarios that require dynamic playback, Canvas can generate video streams on the fly, avoiding the need to redraw frames with JavaScript and saving resources. This approach is also valuable for online teaching, where recording the canvas directly in the browser is simpler and less resource‑intensive than traditional screen‑recording tools.

References

Media Streams API: https://developer.mozilla.org/zh-CN/docs/Web/API/Media_Streams_API

Blob object: https://github.com/akira-cn/FE_You_dont_know/issues/12