**Dibujo en una imagen circulo pero a la hora de guardar la imagen solo se guarda el dibujo **
Este es mi canvas
<input type="button" value='Guardar imagen' onclick='descargar();'/>
canvas id='myCanvas' width='626' height='417'></canvas>
<form name='formName'>
<input name='inputName'>
<img id='theImg' src='https://image.freepik.com/foto-gratis/microchips-radioelementos-procesador-placa-electronica-placa-base_94132-454.jpg'>
</form>
mis funciones son las siguientes
- Elemento de lista Draw () lo utilizo para dibujar
- Elemento de lista descargar()lo utilizo para descargar la imagen que es donde solo logro guardar el dibujo
<script>
function Draw() {
//alert(document.getElementById("X").value + document.getElementById("Y").value + document.getElementById("R").value + document.getElementById("L").value);
var img = document.getElementById("theImg");
var cnvs = document.getElementById("myCanvas");
cnvs.style.position = "absolute";
cnvs.style.left = img.offsetLeft + "px";
cnvs.style.top = img.offsetTop + "px";
var ctx = cnvs.getContext("2d");
ctx.beginPath();
ctx.clearRect(0, 0, ctx.canvas.offsetWidth, ctx.canvas.offsetHeight);//limipamos el arco anteri
ctx.arc(document.getElementById("X").value, document.getElementById("Y").value, document.getElementById("R").value, 0, 2 * Math.PI, false);
ctx.lineWidth = document.getElementById("L").value;
ctx.strokeStyle = document.getElementById("C").value;
ctx.stroke();
}
function descargar() {
var c = document.getElementById("myCanvas");
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;
try {
link.href = c.toDataURL("image/jpg");
} catch (error) {
alert(error);
// expected output: ReferenceError: nonExistentFunction is not defined
// Note - error messages will vary depending on browser
}
}
link.click();
}
</script>
actualmente solo se me descar la imagen de la siguiente manera lo que busco es que el dibujo se guarde arriba de una imagen como lo muestra el siguiente ejemplo