How to save canvas animation as gif or webm?

by

In modern browsers you can use a conjunction of the MediaRecorder API and the HTMLCanvasElement.captureStream method.

The MediaRecorder API will be able to encode a MediaStream in a video or audio media file on the fly, resulting in far less memory needed than when you grab still images.

const ctx = canvas.getContext('2d');
var x = 0;
anim();
startRecording();

function startRecording() {
  const chunks = []; // here we will store our recorded media chunks (Blobs)
  const stream = canvas.captureStream(); // grab our canvas MediaStream
  const rec = new MediaRecorder(stream); // init the recorder
  // every time the recorder has new data, we will store it in our array
  rec.ondataavailable = e => chunks.push(e.data);
  // only when the recorder stops, we construct a complete Blob from all the chunks
  rec.onstop = e => exportVid(new Blob(chunks, {type: 'video/webm'}));
  
  rec.start();
  setTimeout(()=>rec.stop(), 3000); // stop recording in 3s
}

function exportVid(blob) {
  const vid = document.createElement('video');
  vid.src = URL.createObjectURL(blob);
  vid.controls = true;
  document.body.appendChild(vid);
  const a = document.createElement('a');
  a.download = 'myvid.webm';
  a.href = vid.src;
  a.textContent="download the video";
  document.body.appendChild(a);
}

function anim(){
  x = (x + 1) % canvas.width;
  ctx.fillStyle="white";
  ctx.fillRect(0,0,canvas.width,canvas.height);
  ctx.fillStyle="black";
  ctx.fillRect(x - 20, 0, 40, 40);
  requestAnimationFrame(anim);
}
<canvas id="canvas"></canvas>

More Related Contents:

  1. Using HTML5/Canvas/JavaScript to take in-browser screenshots
  2. Capture HTML Canvas as gif/jpg/png/pdf?
  3. Resizing an image in an HTML5 canvas
  4. Get pixel color from canvas, on mousemove
  5. Why does canvas.toDataURL() throw a security exception?
  6. Zoom Canvas to Mouse Cursor
  7. Zoom in on a point (using scale and translate)
  8. how to save canvas as png image?
  9. Does HTML5/Canvas Support Double Buffering?
  10. html 5 canvas LineTo() line color issues
  11. HTML5 Canvas camera/viewport – how to actually do it?
  12. How to stop a requestAnimationFrame recursion/loop?
  13. How to resize html canvas element?
  14. How do I rotate a single object on an html 5 canvas?
  15. Detect if user clicks inside a circle
  16. Detect if user clicks inside a circle
  17. addEventListener for keydown on Canvas
  18. How to determine the intended frame-rate on an html video element
  19. canvas.toDataURL() Security Error The operation is insecure
  20. clearing circular regions from HTML5 Canvas
  21. Is there an equivalent of canvas’s toDataURL method for SVG? [closed]
  22. Snap edges of objects to each other and prevent overlap
  23. Determine if a mesh is visible on the viewport according to current camera
  24. HTML5 Canvas translate(0.5,0.5) not fixing line blurryness
  25. Scaling an image to fit on canvas
  26. Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
  27. Creating a Clickable Grid in a Web Browser
  28. Save many canvas element as image
  29. How to style canvas elements with CSS
  30. canvas- Cropping images in different shapes

Leave a Comment