Cette traduction est incomplète. Aidez-nous à traduire cet article depuis l’anglais
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.
Types
Examples
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
La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez apporter votre contribution, veuillez consulter la page https://github.com/mdn/browser-compat-data et nous envoyer une pull-request.
Update compatibility data on GitHub
| Ordinateur | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
globalCompositeOperation | Chrome Support complet 1 | Edge Support complet 12 | Firefox Support complet 1.5 | IE Support complet 9 | Opera Support complet 9 | Safari Support complet 2 | WebView Android Support complet 1 | Chrome Android Support complet 18 | Firefox Android Support complet 4 | Opera Android Support complet 10.1 | Safari iOS Support complet 1 | Samsung Internet Android Support complet 1.0 |
Légende
- Support complet
- Support complet
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