Borrar el dibujo anterior, en Canvas

neck · #1 (**permalink**) 22/02/2017, 03:48

Hola amigos

Estoy desarrollando un lienzo donde se dibujan, por ejemplo, triángulos con lineTo() pero partiendo de una coordenadas de principio y final de este. La cuestión es que cuando se haga click en cualquier punto del canvas se dibuje un triangulo nuevo con las coordenadas del ratón en el momento de hacer click mas las dos coordenadas predefinidas.

El código que he programado hace lo que necesito pero tengo un "pequeño" gran problema. Necesito que cada vez que haga click se dibuje de nuevo pero borrando lo anterior, es decir, que el ultimo objeto dibujado se borre.

Código HTML:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<p id="coordenadas"></p>

<script>
	
	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');

document.getElementById("canvas").addEventListener("click", function(e) {
    dibujar(e);

});

* ctx.strokeRect(22, 22, 300, 250);

function dibujar(e) {
    var x = e.clientX-7;
    var y = e.clientY-7;
    var coor = "Coordenadas: (" + x + "," + y + ")";
    document.getElementById("coordenadas").innerHTML = coor;

	ctx.beginPath();
	ctx.lineWidth = 1;
	ctx.moveTo(20, 300);
	ctx.lineTo(230, 20);
	ctx.lineTo(x, y);
	ctx.lineTo(20, 300);
	ctx.stroke();

}

</script>



</body>
</html>

Pienso que se podría realizar un borrado del lienzo antes de dibujar el nuevo objeto pero claro, también se me borraría otros elementos que tendría en el canvas.

Puede que sea un problema de metodología del código o que no conozco algún método que solucione este problema.