Saving Resized Animated GIF Matching Canvas Output

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.