I am trying to download a png from a canvas with alpha values (semi-transparent stuff), but every time I download the canvas, all the alpha channels reset back to ff for some reason. Here is my code:

const download = (canvas, filename) => {
    const link = document.createElement('a');
    link.download = `${filename}.png`;
    link.href = canvas.toDataURL("image/png");
    console.log(link.href);
    link.click();
};

const drawAndDownloa = str => {
    const canvas = document.createElement("canvas");
    canvas.width = pixels.length;
    canvas.height = 1; // intentionally small
    const ctx = canvas.getContext("2d");
    
    // pixels is an array of "rrggbbaa" strings
    pixels.forEach((rgba, i) => {
        const r = parseInt(rgba.slice(0, 2), 16);
        const g = parseInt(rgba.slice(2, 4), 16);
        const b = parseInt(rgba.slice(4, 6), 16);
        const a = parseInt(rgba.slice(6, 8), 16);

        ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
        ctx.fillRect(i, 0, 1, 1);
    });

    download(canvas, str.replace(/\W/g, "_"));
};

I know that you need a png-24 to have an alpha channel, but I do now know how to download into a png-24. I also don't know how to check if it is a png-24.