Máscaras de dibujo

En el canvas se puede recortar regiones de cualquier forma y tamaño, de manera que los dibujos posteriores solo afecten a esa zona. De esta manera podemos por ejemplo borrar una parte de una imagen o dibujar sin modificar otras zonas del canvas. Hemos creado una máscara o capa de dibujo.

La forma de usar este método sigue el siguiente patrón:

creamos una figura cualquiera (en el ejemplo un triángulo),
aplicamos el método clip(), que no usa argumentos, y a partir de ese momento cualquier acción sobre el canvas queda reducida a ese área, al triángulo en este ejemplo.

En este ejemplo se crea el triángulo (altura 100 y base 100), luego uso el método clip() para enmascarar el canvas con esa forma, luego dibujo un rectángulo (de alto 50 y ancho 200), pero solo se verá la parte del rectángulo dentro del area recortada, dentro de la máscara.

var miLienzo = document.getElementById("mipanel");

var lapiz = miLienzo.getContext("2d");

lapiz.moveTo(50, 50);

lapiz.lineTo(50, 150); //lado

lapiz.lineTo(150,150); //base

lapiz.closePath(); //el tercer lado

lapiz.stroke(); //no es necesario, solo para que veas el triángulo

lapiz.clip();

lapiz.fillRect(40, 80, 200, 50);

</script>

Borrado en el canvas

El canvas puede borrarse total o parcialmente usando el método clearRect(). Este método borra un área rectangular del canvas, como argumentos usa las coordenadas de la esquina superior izquierda del retángulo, el ancho y el alto. Igual que si se dibuja un rectángulo.

var miImagen = new Image();

var canvas = document.getElementById('miPanel');

lapiz = canvas.getContext('2d');

lapiz.fillStyle="#505050";

lapiz.arc(300,150,80, 0, 2*Math.PI);

lapiz.fill();

lapiz.stroke();

lapiz.clearRect(245,130,110, 40);

</script>

Prueba este código

Si se quiere borrar un área con forma no rectangular puedes usar el enmascaramiento con el método clip(). Para poder seguir dibujando en todo el canvas debes eliminar la máscara creada con clip() para lo cual usa los métodos save() y restore(). Con el primero guardas el contexto del dibujo antes de crear la máscara y con el segundo lo recuperas después de haber borrado.

var miImagen = new Image();

var canvas = document.getElementById('miPanel');

lapiz = canvas.getContext('2d');

lapiz.fillStyle="#505050";

lapiz.fillRect(0, 0, 600, 300);

lapiz.beginPath();

lapiz.arc(300,150, 80, 0, 2*Math.PI);

lapiz.clip()

lapiz.clearRect(220, 70, 160,160);

//solo se borra dentro de la máscara circular

</script>