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.

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

BCD tables only load in the browser

  • 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