I’m trying to save a series of images into a gif. I am trying to do this entirely in P5 without any other libraries or server side infrastructure. I got saveGif to work if I look at the main canvas, but as soon as I try with a graphics object, it breaks. I read using createCanvas multiple times can cause issues, but maybe I am supposed to do instance mode for this?

Anyways, this is what I’m trying right now:

select("#saveGifButton").mouseClicked(function () {
        var images = [];
        var sumWidth = 0;
        var sumHeight = 0;
        for (var i in Frame.frames) { 
            images[i] = loadImage(Frame.frames[i].getUpdatedImageURL(1));//Grabs the Img from the frame, ata  scaling of 1x
            sumWidth += images[i].width;
            sumHeight += images[i].height;
        }
        var picWidth = sumWidth / Frame.frames.length;
        var picHeight = sumHeight / Frame.frames.length;//Uses the average size. 
        var tempGraphics = createGraphics(picWidth, picHeight); 
        // saveGif("MyGif", Frame.frames.length, {
        //  'units':'frames'
        // });//Save Gif on the main canvas
        tempGraphics.saveGif("MyGif", Frame.frames.length, {
            'units':'frames'
        });//Save Gif on the Graphics object

        for (var i in Frame.frames) { 
            tempGraphics.clear();
            tempGraphics.image(images[i], 0, 0, picWidth, picHeight);//Puts the image on the graphics object
            //image(images[i], 0, 0, picWidth, picHeight);//Puts the image on the main Canvas
        }
        tempGraphics.remove();//Removes the graphic to prevent lag

    });

So, when I tried with the graphics item, it gives this error:

???? p5.js says: [p5.js, line 74975] 

Cannot read property of undefined. Check the line number in error and make sure the variable which is being operated is not undefined.

 + More info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_property#what_went_wrong
p5.js:59804 ┌[http://127.0.0.1:5500/lib/p5.js:74975:27] 
     Error at line 74975 in addElement()
└[http://127.0.0.1:5500/lib/p5.js:75050:18] 
     Called from line 75050 in _main.default.createP()
└[http://127.0.0.1:5500/lib/p5.js:84471:32] 
     Called from line 84471 in _class._callee$()
└[http://127.0.0.1:5500/lib/p5.js:50400:25] 
     Called from line 50400 in tryCatch()
└[http://127.0.0.1:5500/lib/p5.js:50594:30] 
     Called from line 50594 in Generator.invoke [as _invoke]()
└[http://127.0.0.1:5500/lib/p5.js:50454:29] 
     Called from line 50454 in prototype.<computed> [as next]()
└[http://127.0.0.1:5500/lib/p5.js:84122:32] 
     Called from line 84122 in asyncGeneratorStep()
└[http://127.0.0.1:5500/lib/p5.js:84141:17] 
     Called from line 84141 in _next()
└[http://127.0.0.1:5500/lib/p5.js:84146:15] 
     Called from line 84146 in ()

GPT and googling failed me. I have no idea how else to handle this. Any ideas?