title: How to fix glitch with gif animation when loading through Konva.js and Gifler?
body: <p>I did the gif-animation loading, following the example in the documentation. However, frames are skipped and frames are displayed incorrectly.</p>
  
  <p>This happens to many gif files. Please, how to fix it, does anyone know?</p>
  
  <p>Here is an example error:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var width = window.innerWidth;
        var height = window.innerHeight;
  
        var stage = new Konva.Stage({
          container: 'container',
          width: width,
          height: height
        });
  
        var layer = new Konva.Layer();
        stage.add(layer);
  
        var canvas = document.createElement('canvas');
        // use external library to parse and draw gif animation
        function onDrawFrame(ctx, frame) {
          // update canvas size
          canvas.width = frame.width;
          canvas.height = frame.height;
          // update canvas that we are using for Konva.Image
          ctx.drawImage(frame.buffer, 0, 0);
          // redraw the layer
          layer.draw();
        }
  
        gifler('https://i.gifer.com/8RDg.gif').frames(canvas, onDrawFrame);
  
        // draw resulted canvas into the stage as Konva.Image
        var image = new Konva.Image({
          image: canvas
        });
        layer.add(image);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/konva@4.0.4/konva.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/gifler@0.1.0/gifler.min.js"&gt;&lt;/script&gt;
  &lt;div id="container"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>