CanvasRenderingContext2D.globalCompositeOperation
La propriété CanvasRenderingContext2D.globalCompositeOperation
de l'API Canvas 2D définit le type d'opération de composition à appliquer lors du tracé de nouvelles formes.
Voir aussi Composition et découpe dans le Tutoriel canvas.
Syntaxe
ctx.globalCompositeOperation = type;
type
est de type String
et permet de choisir quelle opération de composition ou de mode fondu utiliser.
Exemples
Changer l'opération de composition
Cet exemple utilise la propriété globalCompositeOperation
pour dessiner deux rectangles qui s'excluent l'un l'autre quand ils se superposent.
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'xor';
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);
Résultat
Spécifications
Spécification | Etat | Commentaires |
---|---|---|
HTML Living Standard La définition de 'CanvasRenderingContext2D.globalCompositeOperation' dans cette spécification. |
Standard évolutif | |
Compositing and Blending Level 1 | Candidat au statut de recommandation |
Compatibilité des navigateurs
BCD tables only load in the browser
Remarques concernant WebKit/Blink
- Dans les navigateurs de type WebKit et Blink, la méthode non-standard et obsolète
ctx.setCompositeOperation()
est implémentée à la place de cette propriété. - Le support de
"plus-darker"
et"darker"
a été abandonné à partir de Chrome 48. Veuillez utiliser"darken"
à la place.
Remarques concernant Gecko
- Une version préliminaire de la spécification de Canvas définissait une valeur
"darker"
. Cependant, Firefox a abandonné le support de"darker"
dans sa version 4 (bug 571532). Voir aussi cet article de blog qui suggère l'utilisation de"difference"
pour parvenir à un effet similaire à"darker"
.
Voir aussi
- L'interface qui définit cette propriété :
CanvasRenderingContext2D
CanvasRenderingContext2D.globalAlpha