CANVAS ANIMATION TO VIDEO

Export canvas animations
as video.

Turn HTML5 canvas and WebGL drawings, such as generative art, particles, charts and visualizers, into MP4, MOV or WebM at any size, frame by frame.

This clip was made in HTML and rendered with HTML TO MOTION. Watch the full walkthrough ↗

From a canvas sketch to a video file

Whatever you draw on a canvas, the studio captures at the export size and frame rate, without the stutter of screen recording or MediaRecorder.

Download for Windows ↓Get your 7-day trial key ↗

How to export a canvas animation to video

STEP 01 / OPEN

Open your
canvas sketch.

Import the HTML or paste it in. Plain canvas 2D, WebGL, p5.js and other libraries from a CDN all work.

STEP 02 / HOOK

Draw from
time.

Draw each frame inside renderFrame(time, frame) instead of a requestAnimationFrame loop. Without a hook, the loop still replays on a fixed clock.

STEP 03 / SIZE

Size the canvas
to the video.

Set the canvas to the window size so it fills 1920 × 1080, 4K, vertical or square exports.

STEP 04 / RENDER

Export
the video.

Render an MP4, or a PNG sequence for lossless frames. Heavy sketches render smoothly because nothing happens in real time.

A canvas animation with a renderFrame hook

Clear and draw the whole frame from the time value. The same frame always looks the same:

<canvas id="c"></canvas>
<script>
  const c = document.getElementById('c'), ctx = c.getContext('2d');
  c.width = innerWidth; c.height = innerHeight;

  window.renderFrame = (time) => {
    ctx.fillStyle = '#0b1020';
    ctx.fillRect(0, 0, c.width, c.height);
    for (let i = 0; i < 120; i++) {
      const a = i * 0.21 + time * 0.8, r = 40 + i * 4;
      ctx.fillStyle = `hsl(${(i * 3 + time * 60) % 360} 80% 60%)`;
      ctx.beginPath();
      ctx.arc(c.width / 2 + Math.cos(a) * r, c.height / 2 + Math.sin(a) * r, 6, 0, Math.PI * 2);
      ctx.fill();
    }
  };
  renderFrame(0, 0);
</script>

Tips for fast canvas renders

Use seeded randomness. Math.random() changes on every run. Use a seeded generator so particles stay in place between frames and renders.
Avoid per-shape blur. ctx.filter and shadowBlur on many shapes are slow. Draw glows once to an offscreen canvas and reuse them.
Batch your paths. Draw many shapes of one colour in a single path, and keep static setup outside renderFrame.
Use WebGL for pixel effects. Fog, noise and fluids belong in a fragment shader, not in a JavaScript loop over pixels.

Export formats for canvas work

Format	Best for	Transparency
MP4 (H.264)	YouTube, social media, websites, presentations	No
MOV (ProRes 4444)	Premiere Pro, DaVinci Resolve, Final Cut, After Effects	Yes
WebM (VP9)	Web pages and lightweight overlays	Yes
PNG sequence	Compositing and frame-by-frame editing	Yes

Canvas to video questions

Why not use MediaRecorder or canvas.captureStream?

They record in real time, so frames drop when drawing is slow, and the quality depends on the browser encoder. The studio captures every frame and encodes it with FFmpeg at the quality you choose.

Does p5.js work?

Yes. Load p5.js from a CDN. For exact frames, draw from the time value in a renderFrame hook rather than from frameCount.

Can I export a very long or very large canvas animation?

Yes. There is no length limit and sizes go up to 8K. Long renders are split into parallel parts when the page has a renderFrame hook.

Can I get each frame as an image?

Yes. Export a PNG sequence to get one lossless image per frame, with transparency if you need it.

Try it free for 7 days.

Free download from the Microsoft Store. No payment card needed for the trial.

Download for Windows ↓See pricing ↗

Export canvas animationsas video.