Proprietà globalCompositeOperation del canvas

Definizione e uso

globalCompositeOperation Impostazione o restituzione delle proprietà che determinano come disegnare un'immagine sorgente (nuova) su un'immagine di destinazione (già esistente).

Immagine sorgente = Disegno che intendi posizionare sulla lavagna.

Immagine di destinazione = Disegno che hai già posizionato sulla lavagna.

Esempio

Esempio 1

Disegna rettangoli con valori diversi di globalCompositeOperation. Il rettangolo rosso è l'immagine di destinazione. Il rettangolo blu è l'immagine sorgente:

     source-over             destination-over

Il tuo browser non supporta il tag canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50);

Prova personalmente

Esempio 2

Tutti i valori dell'attributo globalCompositeOperation:

Prova personalmente

Sintassi

context.globalCompositeOperation="source-in";

Valore dell'attributo

Valore Descrizione
source-over Predefinito. Mostra l'immagine di origine sull'immagine di destinazione.
source-atop Mostra l'immagine di origine in alto rispetto all'immagine di destinazione. La parte dell'immagine di origine al di fuori dell'immagine di destinazione è invisibile.
source-in Mostra l'immagine di origine all'interno dell'immagine di destinazione. Solo la parte dell'immagine di origine all'interno dell'immagine di destinazione viene mostrata, l'immagine di destinazione è trasparente.
source-out Mostra l'immagine di origine al di fuori dell'immagine di destinazione. Solo la parte dell'immagine di origine al di fuori dell'immagine di destinazione viene mostrata, l'immagine di destinazione è trasparente.
destination-over Mostra l'immagine di destinazione sopra l'immagine di origine.
destination-atop Mostra l'immagine di destinazione in alto rispetto all'immagine di origine. La parte dell'immagine di destinazione al di fuori dell'immagine di origine non viene mostrata.
destination-in Mostra l'immagine di destinazione all'interno dell'immagine di origine. Solo la parte dell'immagine di destinazione all'interno dell'immagine di origine viene mostrata, l'immagine di origine è trasparente.
destination-out Mostra l'immagine di destinazione al di fuori dell'immagine di origine. Solo la parte dell'immagine di destinazione al di fuori dell'immagine di origine viene mostrata, l'immagine di origine è trasparente.
lighter Mostra l'immagine di origine + l'immagine di destinazione.
copy Mostra l'immagine di origine. Ignora l'immagine di destinazione.
xor Combina l'immagine sorgente con l'immagine di destinazione utilizzando l'operazione XOR.

Dettagli tecnici

Valore predefinito: source-over

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Nota:Internet Explorer 8 e versioni precedenti non supportano l'elemento <canvas>.