JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<canvas id="canvas" width="150" height="150"></canvas>
<button id="saveAs">Сохранить как пнг</button>

JavaScript

draw();
function draw() {
	var canvas = document.getElementById('canvas');
	if (canvas.getContext) {
		var ctx = canvas.getContext('2d');
		ctx.fillRect(25,25,100,100);
		ctx.clearRect(45,45,60,60);
		ctx.strokeRect(50,50,50,50);
	}
	document.getElementById('saveAs').addEventListener('click',function(){
		var dataURL = canvas.toDataURL();
		var imageData = document.getElementById('canvas').src = dataURL;
		var image = new Image();
	    image.src = imageData;
	    var link = document.createElement("a");
	    link.setAttribute("href", image.src);
	    link.setAttribute("download", "canvasImage");
	    link.click();
	},false);
}