CanvasRenderingContext2D.globalCompositeOperation

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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
globalCompositeOperationChrome Support complet 1Edge Support complet 12Firefox Support complet 1.5IE Support complet 9Opera Support complet 9Safari Support complet 2WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 1Samsung Internet Android Support complet 1.0

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