JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="300px" height="300px"></canvas>
<a href="#" class="button" id="btn-download" download="meinBild.png">Download</a>

CSS

#canvas {
  background-color: lightgrey;
  cursor: default;
  float: left;
}

JavaScript

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

// add image to canvas
//var img = new Image();
//img.src = "http://www.w3schools.com/tags/img_the_scream.jpg";
//ctx.drawImage(img, 10, 10);


// download button
var button = document.getElementById('btn-download');

button.addEventListener('click', function(e) {
  var dataURL = canvas.toDataURL('image/png');
  button.href = dataURL;
});