Additional unwanted delay for each frame

[marcusteh1238]

Description

When encoding a GIF, it gives me additional delay for each frame of the GIF. This is noticeable for GIFs with high FPS. It seems to be fine for GIFs around 60 FPS, but the delay is noticeable for GIFs above 120 frames. As you can see below, the circle moves slower due to the additional delay.

Before:

After:

Repro

OS: Windows 10 Node Version: v12.13.1 Dependencies:

  "canvas": "^2.6.1",
  "gif-encoder-2": "^1.0.5",
  "gif-frames": "^1.0.1" 

Code snippet to reproduce the bug.

const fs = require('fs');
const { createCanvas, loadImage, createImageData } = require('canvas');
const GIFEncoder = require('gif-encoder-2');
const gifFrames = require('gif-frames'); // https://github.com/benwiley4000/gif-frames

async function getGif() {
  // I used gifFrames to get the image buffer array
  const imageBufferArray = gifFrames({ url: gifBackgroundPath, frames: "all", cumulative: true}).map(data => data.getImage()._obj)
  const encoder = new GIFEncoder(600, 600, 'octree', true);
  encoder.start();
  for (let i = 0; i < frameDataArray.length; i += 1) {
    const image = await loadImage(imageArray[i]);
    const canvas = createCanvas(600, 600);
    const context = canvas.getContext("2d");
    context.drawImage(image, 0, 0);
    encoder.addFrame(context);
  }
  encoder.finish();
  const gifBuffer = encoder.out.getData();
  return fs.writeFile('output.gif', gifBuffer, (err) => { console.log(err) });
}

getGif().then(() => console.log("Done!"));

[Tryliom]

I would say that you cannot go above 100 fps and the more you go after 50 fps, it's getting slower and slower.

Source: https://wunkolo.github.io/post/2020/02/buttery-smooth-10fps/