I am working on an exercise that allows users to upload an image, resize it, and download the resized image. The functionality works well for static images (JPEG, PNG), but I am encountering issues with saving resized animated GIFs.

When a user uploads an animated GIF, the image is composited and displayed correctly, but attempting to save the canvas output just results in saving the original uploaded gif.

Code below:
https://jsfiddle.net/Aloe10211/uxzbwcaj/1/

let originalImage = null;
let originalImageType = '';

document.getElementById('upload').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (!file) return;

    originalImageType = file.type;

    if (file.type === 'image/gif') {
        const reader = new FileReader();
        reader.onload = function(e) {
            originalImage = e.target.result;
            document.getElementById('buttons').style.display = 'none';
            processGIF(originalImage);
        };
        reader.readAsDataURL(file);
    } else {
        const reader = new FileReader();
        reader.onload = function(e) {
            originalImage = e.target.result;
            document.getElementById('buttons').style.display = 'block';
        };
        reader.readAsDataURL(file);
    }
});

document.getElementById('smol50').addEventListener('click', function() {
    resizeImage(0.5);
});

document.getElementById('smol75').addEventListener('click', function() {
    resizeImage(0.25);
});

document.getElementById('smol90').addEventListener('click', function() {
    resizeImage(0.1);
});

function resizeImage(scale) {
    processImage(originalImage, scale);
}

function processImage(dataUrl, scale) {
    const img = new Image();
    img.onload = function() {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const width = img.width * scale;
        const height = img.height * scale;

        canvas.width = width;
        canvas.height = height;

        ctx.drawImage(img, 0, 0, width, height);

        const resizedImage = canvas.toDataURL('image/png');

        document.getElementById('output').src = resizedImage;
        document.getElementById('output-container').style.display = 'block';

        const downloadLink = document.getElementById('download');
        downloadLink.href = resizedImage;
        downloadLink.download = 'resized_image.png';
        downloadLink.style.display = 'block';
        downloadLink.innerText = 'Download Resized Image';
    }
    img.src = dataUrl;
}

function processGIF(dataUrl) {
    document.getElementById('output').src = dataUrl;
    document.getElementById('output').style.width = '100px';
    document.getElementById('output').style.height = 'auto';
    document.getElementById('output-container').style.display = 'block';

    const downloadLink = document.getElementById('download');
    downloadLink.href = dataUrl;
    downloadLink.download = 'resized_image.gif';
    downloadLink.style.display = 'block';
    downloadLink.innerText = 'Download Resized GIF';
}

• The composited animated GIF uploads and displays correctly.
• When resized, the GIF saves as the original gif file with no modification.

Expected:

• The resized and composited GIF should be downloadable as an animated GIF matching the canvas output.