Propriété globalCompositeOperation du Canvas

❮ Référence Canvas

Exemple

Dessinez deux rectangles. Les rectangles rouges représentent les destinations, tandis que les rectangles bleus sont les sources :

Votre navigateur ne prend pas en charge la balise HTML5 canvas.

JavaScript :

const canvas = document.getElementById("myCanvas");
const ctx = canvas.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);
Essayez-le vous-même »

Description

La propriété globalCompositeOperation définit ou renvoie la manière dont une source est dessinée sur une destination.

Source = dessins que vous êtes sur le point de réaliser sur le canvas.

Destination = dessins déjà présents sur le canvas.

Syntaxe

context .globalCompositeOperation = "valeur"

Valeurs de Propriété

Valeur Description Jouez-le
source-over Par défaut
Affiche la source sur la destination 		Jouez-le »
source-atop Affiche la source au-dessus de la destination. La partie de l'image source qui est en dehors de la destination n'est pas affichée Jouez-le »
source-in Affiche la source dans la destination. Seule la partie de la source qui est À L'INTÉRIEUR de la destination est affichée, et la destination est transparente Jouez-le »
source-out Affiche la source en dehors de la destination. Seule la partie de la source qui est À L'EXTÉRIEUR de la destination est affichée, et la destination est transparente Jouez-le »
destination-over Affiche la destination sur la source Jouez-le »
destination-atop Affiche la destination au-dessus de la source. La partie de la destination qui est en dehors de la source n'est pas affichée Jouez-le »
destination-in Affiche la destination dans la source. Seule la partie de la destination qui est À L'INTÉRIEUR de la source est affichée, et la source est transparente Jouez-le »
destination-out Affiche la destination en dehors de la source. Seule la partie de la destination qui est À L'EXTÉRIEUR de la source est affichée, et la source est transparente Jouez-le »
lighter Affiche la source + la destination Jouez-le »
copy Affiche la source. La destination est ignorée Jouez-le »
xor La source est combinée en utilisant un OU exclusif avec la destination Jouez-le »

Exemple

Toutes les valeurs de la propriété globalCompositeOperation :

Essayez-le vous-même »

Support des Navigateurs

L'élément <canvas> est une norme HTML5 (2014).

globalCompositeOperation est pris en charge dans tous les navigateurs modernes :

Chrome Edge Firefox Safari Opera IE
Oui Oui Oui Oui Oui 9-11
❮ Référence Canvas