Muchas Gracias me quedo muy bien mi Paint con el boton guardar les comparto el codigo del Paint.
CODIGO HTML
<html>
<head>
<title>
Paint Feasiel
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<canvas id="canvas" width="500" height="500"> </canvas><br>
<input type="color" id="color" oninput="defcolor (this.value);">
<input type="range" id="grosor" oninput="defgrosor (this.value);" min="1" max="5" value="1">
<a id="download">
<input type="button" value="Descargar" onClick="descargar()">
</a>
<script src="js/paint.js">
</script>
</body>
</html>
CODIGO JAVASCRIPT
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var rect = canvas.getBoundingClientRect();
var x=0, y=0;
var dibujando=false;
var colores ='black';
var grosor = 1;
function defcolor(c){
color = c;
}
function defgrosor(g){
grosor = g;
}
canvas.addEventListener('mousedown',function(e){
x=e.clientX - rect.left;
y=e.clientY - rect.top;
dibujando = true;
});
canvas.addEventListener('mousemove',function(e){
if (dibujando===true){
dibujar(x , y , e.clientX - rect.left, e.clientY - rect.top);
x = e.clientX - rect.left;
y = e.clientY - rect.top;
}
});
canvas.addEventListener('mouseup',function(e){
if (dibujando===true){
dibujar (x , y , e.clientX - rect.left, e.clientY - rect.top);
x=0;
y=0;
dibujando=false;
}
});
function dibujar(x1,y1,x2,y2){
ctx.beginPath();
ctx.strokeStyle = color;
ctx.lineWidth=grosor;
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
ctx.closePath();
}
function descargar(){
var filename = prompt("Guardar como...","Nombre del archivo");
if (canvas.msToBlob){ //para internet explorer
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob, filename + ".png" );// la extensión de preferencia pon jpg o png
} else {
link = document.getElementById("download");
//Otros navegadores: Google chrome, Firefox etc...
link.href = canvas.toDataURL("image/png");// Extensión .png ("image/png") --- Extension .jpg ("image/jpeg")
link.download = filename;
}
}
CODIGO CSS
#canvas{
border: 5px solid rgb(202, 23, 23);
}
Crear cuenta