canvas to image conversion

by Amanda Williamson

HTML

<canvas id="canvas1" width="200" height="200"></canvas>

CSS

canvas {
    border: 1px solid gray;
}
img {
    border: 2px red dotted;
}

JavaScript

var can = document.querySelector('#canvas1');
var ctx = can.getContext('2d');
ctx.fillRect(50,50,50,50);

var img = new Image();
img.height = 500;
img.width = 500;
img.src = can.toDataURL();
var link = document.createElement('a');
link.href = img.src;
link.download = 'study-chart.png';
link.click();

document.body.appendChild(img);