How to save canvas animation as gif or webm?

Question

i have written this function to capture each frame for the GIF but the output is very laggy and crashes when the data increases. Any suggestions ?

Code :

    function createGifFromPng(list, framerate, fileName, gifScale) {             gifshot.createGIF({                 'images': list,                 'gifWidth': wWidth * gifScale,                 'gifHeight': wHeight * gifScale,                 'interval': 1 / framerate,             }, function(obj) {                 if (!obj.error) {                     var image = obj.image;                     var a = document.createElement('a');                     document.body.append(a);                     a.download = fileName;                     a.href = image;                     a.click();                     a.remove();                 }             });         } /////////////////////////////////////////////////////////////////////////  function getGifFromCanvas(renderer, sprite, fileName, gifScale, framesCount, framerate) {             var listImgs = [];             var saving = false;             var interval = setInterval(function() {                 renderer.extract.canvas(sprite).toBlob(function(b) {                     if (listImgs.length >= framesCount) {                         clearInterval(interval);                         if (!saving) {                         createGifFromPng(listImgs, framerate, fileName,gifScale);                             saving = true;                         }                     }                     else {                         listImgs.push(URL.createObjectURL(b));                     }                 }, 'image/gif');             }, 1000 / framerate);         } 

Answer 1

You can also use https://github.com/spite/ccapture.js/ to capture to gif or video.

Answer 2

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>