<!DOCTYPE html>
<html>
<head>
<title>Descargar Imagen del Canvas por medio de un Boton</title>
<script>
window.onload = function () {
var c = document.getElementById("miCanvas");
document.getElementById('descargar').onclick = function(){
let filename = prompt("Guardar como",""),
link = document.createElement('a');
if (filename == null){//si el usiario dio cancelar
return false;
}
else if (filename == ""){//si el usuario le dio click y no puso nombre al archivo
link.download = "Sin título";
link.href = c.toDataURL("image/png");//usa la imagen del canvas
}
else{//si el usuario le dio aceptar y puso un nombre al archivo
link.download = filename;
link.href = c.toDataURL("image/png");
}
link.click();
}
//o puedes usar una minilibreria que hice https://www.lawebdelprogramador.com/codigo/JavaScript/4290-libreria-canvas-JavaScript.html
};
</script>
</head>
<body>
<canvas id="miCanvas" width="1000" height="600" style="border:1px solid #d3d3d3;">
Su navegador no es compatible con Canvas.
</canvas>
<input type="button" id="descargar" value="Guardar imagen">
</body>
</html>