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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
globalCompositeOperationChrome Support complet OuiEdge Support complet 12Firefox Support complet 1.5IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
  • 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