JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<body>

</body>

JavaScript

// Создаем canvas
const canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 480;
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');

// Настраиваем запись
const stream = canvas.captureStream(30); // 30 FPS
const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
const chunks = [];

recorder.ondataavailable = e => chunks.push(e.data);
recorder.onstop = () => {
  const blob = new Blob(chunks, { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  
  // Создаем ссылку для скачивания
  const a = document.createElement('a');
  a.href = url;
  a.download = 'animation.webm';
  a.click();
};

// Запускаем запись
recorder.start();

// Рисуем анимацию
let x = 0;
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'red';
  ctx.beginPath();
  ctx.arc(x, canvas.height/2, 50, 0, Math.PI * 2);
  ctx.fill();
  x += 5;
  
  if (x > canvas.width) {
    recorder.stop();
    return;
  }
  
  requestAnimationFrame(draw);
}

draw();