JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

canvas {
		  background: #fff;
		}
		
		a {
		  background: #69c;
		  color: #fff;
		  padding: 5px 10px;
		}

JavaScript

var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  img.style.display = 'none';
};

var link = document.createElement('a');
link.innerHTML = 'Save';
link.href = document.getElementById('canvas');

link.addEventListener('click', function(e) {
  link.download = "imagename.png";
}, false);

document.body.appendChild(link);