JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="samplecanvas" width="400" height="300"></canvas><p />
	<button onclick="setupDownload()">Set up Download</button><br />
	<a id="downloadlink">Download link will appear here.</a><br />
	This will work on Chrome, Firefox, and Opera, but not Safari. There is a nasty workaround that can be used to download in IE 10+ (see <a href="http://msdn.microsoft.com/en-us/library/ie/hh779016(v=vs.85).aspx" target="_blank">this site</a> for the basic idea) but no workaround for Safari as far as I know.

JavaScript

function setupDownload(){
    // First draw a red rectangle on the canvas.
    var canvas = document.getElementById('samplecanvas');
    var context = canvas.getContext('2d');
    context.fillStyle = '#FF0000';
    context.fillRect(0,0,150,75);
    
    // Get the image data from the canvas in JPEG form.
    var dataURL = canvas.toDataURL('image/jpeg');
    // Set up the download
    var dllink = document.getElementById('downloadlink');
    dllink.setAttribute("href",dataURL);
    dllink.setAttribute("download","samplepic.jpeg");
    dllink.innerHTML = "Ready to download!"
}