JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="500" height="500" style="border:1px solid #d3d3d3;"></canvas>

<button id="download-btn">Download</button>

JavaScript

var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);

document.getElementById('download-btn').addEventListener('click', function() {
    downloadURI(getCanvasAsImage(ctx, 10, 10, 50, 50), 'canvas.png');
});

function getCanvasAsImage(ctx, x, y, width, height) {
    var imgData = ctx.getImageData(x, y, width, height);
    
    var tc = document.createElement('canvas');
    tc.width = imgData.width;
    tc.height = imgData.height;
    var tctx = tc.getContext('2d');
    tctx.putImageData(imgData, 0, 0);
    return tc.toDataURL('image/png');
}

function downloadURI(uri, name) {
  var link = document.createElement('a');
  link.download = name;
  link.href = uri;
  link.click();
}