<canvas id="canvasBox" width="500" height="500" style="border: 1px solid #999999;"></canvas>

<button id="screenShot">download</button>

<script type="text/javascript">
function download(filename, text, isUrl) {
var element = document.createElement('a');
if (isUrl) {
element.setAttribute('href', text);
} else {
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
}
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}

function watermarkedDataURL(canvas, text) {

var tempCanvas = document.createElement('canvas');
var tempCtx = tempCanvas.getContext('2d');
var cw, ch;
cw = tempCanvas.width = canvas.width;
ch = tempCanvas.height = canvas.height;
tempCtx.drawImage(canvas, 0, 0);
tempCtx.font = "50px verdana bolder";
var textWidth = tempCtx.measureText(text).width;
tempCtx.translate(cw / 2, ch / 2);
tempCtx.rotate(-30 * Math.PI / 180);
tempCtx.globalAlpha = .30;
tempCtx.fillStyle = 'grey';
tempCtx.fillText(text, -textWidth / 2, 0);
return (tempCanvas.toDataURL());
}
document.getElementById('screenShot').addEventListener('click', function () {
const time = Date.now();
const data = watermarkedDataURL(document.getElementById('canvasBox'), time);
download(`${time}.png`, data, true);
});

</script>