JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="300" height="300"></canvas>

JavaScript

// Get the canvas and its context
let canvas = document.querySelector('canvas');
let context = canvas.getContext('2d');
context.fillStyle = '#faa';

// Set up the strema and recorder
let stream = canvas.captureStream(20);
let recorder = new MediaRecorder(stream, {
  mimeType: 'video/webm',
});
let data = [];

recorder.addEventListener('dataavailable', event => data.push(event.data));

recorder.addEventListener('stop', () => {
  let blob = new Blob(data, {
    type: 'video/webm',
  });
  let exportUrl = URL.createObjectURL(blob);
  console.log(exportUrl);
  window.open(exportUrl, '_blank');
});

// start recording
recorder.start();

// stop recording after 3 seconds
setTimeout(() => {
  recorder.stop();
  stream.getTracks().forEach(track => track.stop());
  clearInterval(drawInterval);
}, 3000);

// draw random squares
let drawInterval = setInterval(() => {
  let x = Math.random() * 295,
    y = Math.random() * 295;
  context.fillRect(x, y, 5, 5);
}, 10);