JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="200" height="200"></canvas>

<a id="button">Save Image</a>

<!-- This solution comes from https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image -->

CSS

canvas {
    border: 1px solid black;
}
a {
    display: block;
}

JavaScript

var canvas = document.getElementById("canvas").getContext("2d");

var button = document.getElementById("button");

var image = new Image();
image.crossOrigin = "anonymous";  // This enables CORS
image.onload = function (event) {
    try {
        canvas.drawImage(image, 0, 0, 200, 200);
        button.download = "cat.png";
        button.href = canvas.canvas.toDataURL();        
    } catch (e) {
        alert(e);
    }
};
image.src = "https://i.chzbgr.com/maxW500/1691290368/h07F7F378/"