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

js

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

html

<canvas id="canvas"></canvas>

JavaScript

js

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