Propriedade globalCompositeOperation do Canvas

Manual de referência Canvas

Definição e uso

globalCompositeOperation Configuração de propriedades ou retorno de como desenhar uma imagem de origem (nova) em uma imagem de destino (já existente).

Imagem de origem = Desenho que você pretende colocar na tela.

Imagem de destino = Desenho que você já colocou na tela.

Exemplo

Exemplo 1

Desenhar retângulos com diferentes valores de globalCompositeOperation. O retângulo vermelho é a imagem de destino. O retângulo azul é a imagem de origem:

　　　　　source-over 　　　　　　　　　　　　destination-over

Seu navegador não suporta o 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);

Experimente pessoalmente

Exemplo 2

Todos os valores de atributo globalCompositeOperation:

Experimente pessoalmente

Sintaxe

context.globalCompositeOperation="source-in";

Valor do atributo

Valor Descrição
source-over Padrão. Exibir a imagem de origem sobre a imagem de destino.
source-atop Exibir a imagem de origem no topo da imagem de destino. A parte da imagem de origem fora da imagem de destino não será visível.
source-in Exibir a imagem de origem dentro da imagem de destino. Apenas a parte da imagem de origem dentro da imagem de destino será exibida, a imagem de destino é transparente.
source-out Exibir a imagem de origem fora da imagem de destino. Apenas a parte da imagem de origem fora da imagem de destino será exibida, a imagem de destino é transparente.
destination-over Exibir a imagem de destino acima da imagem de origem.
destination-atop Exibir a imagem de destino no topo da imagem de origem. A parte da imagem de destino fora da imagem de origem não será exibida.
destination-in Exibir a imagem de destino dentro da imagem de origem. Apenas a parte da imagem de destino dentro da imagem de origem será exibida, a imagem de origem é transparente.
destination-out Exibir a imagem de destino fora da imagem de origem. Apenas a parte da imagem de destino fora da imagem de origem será exibida, a imagem de origem é transparente.
lighter Exibir a imagem de origem + imagem de destino.
copy Exibir a imagem de origem. Ignorar a imagem de destino.
xor Combine a imagem de origem com a imagem de destino usando a operação de XOR.

Detalhes técnicos

Valor padrão: source-over

Suporte do navegador

Os números na tabela indicam a versão do navegador que suporta plenamente essa propriedade pela primeira vez.

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

Observação:O Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.

Manual de referência Canvas