El código lo que hace es colorear una imagen que tengo de fondo sobre el CANVAS (similar a lo que hace PAINT), pero a la hora de guardar la imagen, se descargan solo los cambios hechos, y la imagen de fondo se pierde.
Agradecería inmensamente a la persona que me ayuda con este pequeño problema ya que he probado de todo y no doy con la solución de como guardar la imagen con los cambios hechos sobre ella.
<html lang="en">
<style type="text/css">
canvas {
background-image: url(https://www.ejemplode.com/design/images/logo.jpg);
}
.herramientas {
width: 100px;
}
.herramientas div {
background-color: black;
}
.herramientas div:hover {
border: solid red 1px;
}
.herramientas img:hover {
border: solid red 1px;
}
</style>
<script>
var color = "#000000";
var tamano = 5;
var pintura = false;
function pintar(event) {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
if (pintura) {
ctx.fillStyle = color;
ctx.fillRect(event.clientX - 10, event.clientY + 15, tamano, tamano);
}
}
function activar() {
pintura = true;
}
function desactivar() {
pintura = false;
}
function scolor() {
color = document.getElementById("colores").value;
}
function stamano(numero) {
tamano = numero;
}
function guardari() {
var canvas = document.getElementById("canvas");
var imagen = canvas.toDataURL("image/png");
this.href = imagen;
}
</script>
<body>
<table>
<tr>
<td><canvas width="440" height="450" id="canvas" onmousemove="pintar(event);" onmousedown="activar();" onmouseup="desactivar();"></canvas></td>
<td class="herramientas">
<div style="width: 10px; height: 10px;" onclick="stamano(3);"></div><br />
<div style="width: 20px; height: 20px;" onclick="stamano(8);"></div><br />
<input type="color" id="colores" onchange="scolor();" />
<a href="#" download="canvas.png" id="guardarimagen" onclick="href=canvas.toDataURL">Guardar como imagen</a>
</td>
</tr>
</table>
<script>
document.getElementById("guardarimagen").addEventListener("click", guardari, false);
</script>
</body>
</html>