CanvasRenderingContext2D.globalCompositeOperation

De CanvasRenderingContext2D.globalCompositeOperationonderdeel van de Canvas 2D API verandert het type van renderen van nieuwe figuren. Hierbij is type een string die de nieuwe rendermodus geeft.

Bekijk ook het hoofdstuk Compositing in de Canvas Tutorial.

Syntax

ctx.globalCompositeOperation = type;

Types

Examples

globalCompositeOperation gebruiken

Dit is maar een klein stukje code die de globalCompositeOperation property gebruikt om twee rechthoeken te tekenen die elkaar erbuiten houden waar ze overlappen.

HTML

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

JavaScript

var canvas = document.getElementById('canvas');
var 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);

Bewerk de code hieronder en zie de veranderingen:

Specificaties

Specificatie Status Comment
HTML Living Standard
The definition of 'CanvasRenderingContext2D.globalCompositeOperation' in that specification.		 Living Standard  
Compositing and Blending Level 1 Candidate Recommendation  

Browserondersteuning

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Standaard (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
Blendmodus (Yes) (Yes) 20 (20) ? ? (Yes)
Feature Android Android Webview Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Standaard (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
Blendmodus ? ? (Yes) 20.0 (20) ? ? ? ?
  • In WebKit- and Blink-gebaseerde Browsers, is een niet-standaard en afgewezen functie ctx.setCompositeOperation() gebruikt voor deze operatie.
  • Ondersteuning "plus-darker" en "darker" zijn verwijderd in Chrome 48. Ontwikkelaars zoeken een vervanging die "darken" moet gebruiken.

Gecko-specifieke opmerkingen

  • Een vroege Canvas-specificatie draft heeft de waarde "darker", maar Firefox verwijderde ondersteuning voor "darker" in versie 4 (bug 571532). Bekijk ook deze blogpost die de difference value aanraad om een gelijk effect als "darker" te maken.

Bekijk ook