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.
<canvas width="600" height="400" id="mipanel" style="border: 1px solid black"></canvas>
<script>
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>
La máscara es como si el canvas fuera una capa con una ventana (clip) por la que se ve la hoja de dibujo.
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.
<canvas width="600" height="300" id="miPanel" style="border: 1px black solid"></canvas>
<script>
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>
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.
<canvas width="600" height="300" id="miPanel" style="border: 1px black solid"></canvas>
<script>
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>