26 Oct 2018 by Usama

I made some visualizations in HTML5 canvas and wanted to record them to display in blog. Could not find a simple way to do that. CCapture.js added too much performance overhead which made animations slow. Using built in MediaRecorder is apparently the simplest and most effitient way to record whatever is happening on canvas.

NOTE: I have only tested it with Chrome and it should work fine with Firefox

Link: CanvasRecorder

How to use

Create a recorder

const canvas = document.getElementById('animation');
const recorder = new CanvasRecorder(canvas);
// optional: bits per second for video quality, defaults to 2.5Mbps
const recorder = new CanvasRecorder(canvas, 4500000);

Start recording


Stop recording


Save/download recording;

// Save with given file name'busy_motion.webm');