title: How to save canvas animation as gif or webm?
body: <p>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 ?</p>
  
  <p>Code :</p>
  
  <pre><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 &gt;= framesCount) {
                          clearInterval(interval);
                          if (!saving) {
                          createGifFromPng(listImgs, framerate, fileName,gifScale);
                              saving = true;
                          }
                      }
                      else {
                          listImgs.push(URL.createObjectURL(b));
                      }
                  }, 'image/gif');
              }, 1000 / framerate);
          }
  </code></pre>