jsgif | HTML5 Canvas to GIF and Animations | Animation library

The main issue in your solution is that you are looping through all inserted frame-images and using window.onload with the expectation to draw images on the canvas. However, you are assigning windows.onload on the image elements after the images have already been attached to the dom in the previous (for i = 0) iteration, through $("#frames").append(.... This means that your onload handlers are getting registered after the event has already fired.

I rearranged your code into the snippet below to make sure that onload is registered before appending the image-frames into the document.

In this solution here I created the "spritesheet" by putting the image-frames vertically one-after-the-other. Tweak the solution accordingly to create your desired "spritesheet layout".

The tricky part is that you need to set a width and height for the canvas in a dynamic fashion, which means you have to wait for all image-frames to be loaded into the document and meassure their collective widths and heights. The algorithm should be:

1. Collect all widths and heights of image-frames onload
2. Calculate the total canvas.width and canvas.height depending on your desired layout (in my vertical-one-ofter-the-other solution this means to use the maximal image width as canvas width and the sum of all image heights as height. If you need a different spritesheet layout then you need to adapt this logic differently)
3. Draw all the images on the canvas, which by this point has enough width and height to fit all your gif-frame-images.

In my solution I did not implement this algorith, I rather hard-coded the canvas width and height after manually calculating the max-img-width and total-img-height for your particular gif example.