JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="cvs" width="100" height="100"></canvas>
<a href="#">Data URI me!</a>

CSS

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

JavaScript

var canvas = document.getElementById('cvs');
canvas.width=200;
canvas.height=200;
var context = canvas.getContext("2d");
context.rect(10,10,200,200);

var img = new Image();
img.crossOrigin = '';
img.onload = function() {
  context.drawImage(img,0,0,200,200);
  var firstPix = context.getImageData(0,0,1,1).data;
  if ('0,0,0,0' === [].join.call(firstPix, ','))
    alert('Didn\'t work, :(');
  else
    alert('Yay, it worked!');
};
img.src = "http://danbeam.dyndns.org/chovy.jpg";

document.querySelector('a').onclick = function(e) {
  e.preventDefault();
  if (!window.open(canvas.toDataURL())) {
    console.log(canvas.toDataURL());
    alert("Look at your console");
  }
};