How to Render an HTML Canvas Animation to MP4

To turn an animation drawn in an HTML <canvas> into an MP4, record the canvas as a video stream in the browser, then convert the recording. A canvas is the browser area where JavaScript draws images and animation frames. The browser’s MediaRecorder API records the canvas, but it commonly saves the recording as WebM, so you need to convert the file to MP4.

For a narrated explainer or product demo made from canvas scenes, explainroo uses a coding agent to create the scenes and render them into an MP4. If your web page already has a canvas animation, use the browser-recording method below.

Record the canvas, then convert the video

Use canvas.captureStream() to create a video stream from the canvas frames. Give the stream to MediaRecorder, collect the recorded data, and save it as a file. The canvas recording example shows how.

const canvas = document.querySelector("canvas");
const stream = canvas.captureStream();
const recorder = new MediaRecorder(stream);
const chunks = [];

recorder.ondataavailable = (event) => {
  if (event.data.size > 0) chunks.push(event.data);
};

recorder.onstop = () => {
  const blob = new Blob(chunks, { type: recorder.mimeType });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");

  link.href = url;
  link.download = "canvas-recording.webm";
  link.click();

  URL.revokeObjectURL(url);
};

recorder.start();
startAnimation();

// Call recorder.stop() when the animation has finished.

Replace startAnimation() with your animation’s start function. Stop the recorder after the final frame. Check recorder.mimeType to see the recording format. Many browsers record WebM, so convert the file to get an MP4.

For a local conversion, FFmpeg can encode the WebM recording as an MP4:

ffmpeg -i canvas-recording.webm -c:v libx264 -pix_fmt yuv420p canvas-animation.mp4

Browser conversion has limits. ffmpeg.wasm runs FFmpeg inside a browser. At high resolutions, converting a WebM file with it can take a long time and use a lot of memory. A reported conversion issue describes slow processing and seekability problems with some captured files. Use browser conversion for short, small clips and local FFmpeg for larger recordings.

To control each frame, save the canvas frames as images and use FFmpeg to assemble them into a video. The ffmpeg.wasm discussion of generating a movie from images describes this method. It takes more setup, but does not rely on recording the browser in real time.

Create an MP4 with explainroo

For a new narrated explainer or product demo, explainroo uses a coding agent to render the canvas and create an MP4. It is a free, open-source kit under the MIT license. It supports coding agents that can run shell commands, including Claude Code, Codex, Pi, OpenCode, and Gemini CLI, and works best with Claude Code.

Give your agent this prompt, replacing the bracketed topic:

Make me a short explainer video about [your topic]. Use explainroo for it: read its AGENTS.md and follow the steps.

The agent sets up explainroo, creates and checks the video, then gives you an MP4 file. It writes script.md with the narration and scenes.js, which draws the scenes on an HTML canvas. You can time a drawing to appear on a chosen spoken word.

A local voice model reads the script. Whisper, a speech-recognition model, marks when each word is spoken. Chrome draws the video frames, and FFmpeg combines them into an MP4. The agent checks still images of the scenes and a contact sheet of frames. It also checks text layout and speech recognition results. Review the MP4 yourself before publishing because the agent cannot watch the finished video.

For a product demo, tell the agent where to find the product’s code or website. It rebuilds the screens with their colors, fonts, and button labels, then adds a pointer that clicks and types along with the narration. You can choose one of five visual looks and a wide, tall, portrait, or square layout. Tall, portrait, and square videos include word-by-word captions. The pace setting in video.json controls narration, pauses, and animation speed.

The built-in voice offers American and British English narration. Narration is available only in English, and you do not need an account or API key. explainroo also creates background music and sound effects, and lowers the music volume under the narration. Optional AI illustrations cost money per image. The coding agent is a separate service with its own pricing. See the explainroo documentation for setup and usage details.

explainroo makes explainers and product demos with canvas scenes. It does not edit existing camera footage, create talking avatars or live-action footage, or offer a drag-and-drop editor. Describe the video to the agent and ask for changes.

Choose the method that matches your animation

For an animation already running on your page, record the canvas with captureStream() and convert the file with FFmpeg. Save frames as images instead when you need more control over which frames go into the final video.

For a narrated explainer or product demo, explainroo automates scene drawing, narration, timing, checks, and MP4 assembly. Its open-source code includes instructions for setting it up on your computer.