Gif is distorted + much faster

[jameslinimk]

Code

import canvasGif from "canvas-gif"
import fs from "fs"

const gifUrl = "https://compote.slate.com/images/697b023b-64a5-49a0-8059-27b963453fb1.gif"

const makeGif = async () => {
    const response = await fetch(gifUrl)
    const arrayBuffer = await response.arrayBuffer()
    canvasGif(Buffer.from(arrayBuffer), (ctx, width, height, totalFrames, currentFrame) => {
        ctx.fillStyle = "#fff"
        ctx.font = "30px 'Fira Code Retina'"
        ctx.fillText("this is epic!?!", 50, 100)
        ctx.fillText(`Frame ${currentFrame}/${totalFrames}`, 50, 300)
    }, {}).then((buffer) => {
        fs.writeFileSync("./output.gif", buffer)
        console.log("Done!")
    })
}

makeGif()

Original gif

Modified

How can I fix the distortion? Also, is there a way to set the fps the same as the original gif? The problem isn't Buffer.from(arrayBuffer) because when I write that to ./output.gif directly, there is no distortion.

[newtykip]

This distortion is caused as the initial GIF you are using as input is coalesced - please ensure you have GraphicsMagick and the coalesce option is enabled, and if you keep having issues just leave another comment. As for the fps, you have to set the option yourself as well (it defaults to 60)