Creare una maschera di ritaglio con canvas

Vediamo come creare una maschera di ritaglio con il canvas.
Ma cos'è una maschera di ritaglio?

Per capire di cosa si tratta facciamo un esempio e prendiamo due elementi, un immagine di un tramonto e una scritta e li mettiamo uno sopra l'altro. Vedremo una scritta soprapposta ad una foto.

Ma noi vogliamo che il testo diventi una maschera di ritaglio, nascondendo tutto quello che si trova subito sotto tranne la scritta stessa che mostrerà la parte sottostante come se fosse ritagliata, per l'appunto.

Adesso che abbiamo capito vediamo come applicarla nel canvas.
Ci sono due modi per applicare il ritaglio, vediamo le differenze.

Iniziamo preparando le parti in comune per tutti e due i modi, inizializziando il canvas e carichicando un immagine.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 600;

let img = new Image();
img.src = 'https://source.unsplash.com/GPPAjJicemU/600x600';
img.addEventListener('load', () => {
  ctx.drawImage(img, canvas.width, canvas.height);
})

Clip

Il primo modo per "ritagliare" è il metodo clip().

Questa tecnica è utilizzata quando vogliamo creare una maschera di ritaglio a partire da una figura geometrica.

Le figure geometriche si creano in vario modo, ma sono quasi tutte accomunate dal fatto che per visualizzarle a video bisogno usare il metodo fill() o stroke().
Per fare far diventare una maschera di ritaglio una figura bisogna usare il metodi clip(), al posto dei metodi di visualizzazione a video.

Naturmalmente quelli che non sono soggetti a questi metodi non possono essere usati come maschera di ritaglio con clip() e sono:

...

let img = new Image();
img.src = 'https://source.unsplash.com/GPPAjJicemU/600x600';
img.addEventListener('load', () => {

  ctx.rect(200, 150, 200, 200);
  ctx.arc(300, 100, 50, 0, 2 * Math.PI);
  ctx.clip();

  ctx.drawImage(img, 0, 0);
})

In questo esempio abbiamo creato due figure: un cerchio e un quadrato che andreanno a visualizzare il contenuto sotto stante l'immagine con il metodo clip().

globalCompositeOperation

Un secondo metodo è sfruttare la proprietà del context: globalCompositeOperation, questa definisce come due elementi si debbano sovrapporre.

Ci sono tanti modi con effetti diversi per sovrapporre due elementi e che vedremo in un post dedicato, in questo caso utilizzeremo solo quello che fa al caso nostro.

ctx.globalCompositeOperation = 'destination-atop';

Ma vediamo all'opera

img.addEventListener('load', () => {
  ctx.drawImage(img, 0, 0);

  ctx.globalCompositeOperation = 'destination-atop';

  ctx.font = 'bold 132px sans-serif';
  ctx.fillText('SUNRISE', 10, 150)

})

In questo caso l'elemento sottostante il globalCompositeOperation diventerà la maschera di ritaglio dell'immagine sovrastante.

Come vedrete dal codice questo metodo non ha più il vincolo delle forme, ma si può usare con qualsiasi elemento grafico, come nel nostro caso, il testo.

Conclusione

I due metodi sono molto simili. A mio parere quando si deve fare una maschera con delle figure geometriche è sempre meglio usare il metodo clip(). Perchè è più veloce e da meno problemi di implementazione.
Mentre userei globalCompositeOperation quando si vuole fare una maschera con il testo.

Se avete dei consigli, suggerimenti o critiche costruttive lasciatemi un commento qui sotto oppure contattatemi trammite i miei social.