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
| Specification |
|---|
| HTML Standard # dom-context-2d-globalcompositeoperation-dev |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- L'interface qui définit cette propriété :
CanvasRenderingContext2D CanvasRenderingContext2D.globalAlpha