Para borrar un rectángulo del lienzo debemos utilizar el método clearRect. Los parámetros son similares al método fillRect, es decir x,y,ancho y largo.
Confeccionaremos un programa que dibuje un cuadrado rojo de 300 píxeles de lado y luego borraremos tres cuadraditos en la diagonal principal del cuadrado rojo:
<!DOCTYPE HTML>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
<script type="text/javascript">
function retornarLienzo(x) {
var canvas = document.getElementById(x);
if (canvas.getContext) {
var lienzo = canvas.getContext("2d");
return lienzo;
} else
return false;
}
function dibujar() {
var lienzo=retornarLienzo("lienzo1");
if (lienzo) {
lienzo.fillStyle="rgb(255,0,0)";
lienzo.fillRect(0,0,300,300);
lienzo.clearRect(10,10,20,20);
lienzo.clearRect(140,140,20,20);
lienzo.clearRect(270,270,20,20);
}
}
</script>
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="300" height="300">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>
El resultado en el navegador al cargar esta página es:
Como podemos ver primero dibujamos el cuadrado rojo y seguidamente llamamos tres veces a clearRect con las coordenadas respectivas:
lienzo.fillStyle="rgb(255,0,0)";
lienzo.fillRect(0,0,300,300);
lienzo.clearRect(10,10,20,20);
lienzo.clearRect(140,140,20,20);
lienzo.clearRect(270,270,20,20);