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.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, :(');
};
img.src = "http://chovy.dyndns.org/cdn/16907303_1294527306.jpg";

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