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:

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code" style="height:120px;">
ctx.globalCompositeOperation = 'xor';

ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);

ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);</textarea>

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var edit = document.getElementById('edit');
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener('click', function() {
  textarea.focus();
})

textarea.addEventListener('input', drawCanvas);
window.addEventListener('load', drawCanvas);

Specificaties

Browserondersteuning

WebKit/Blink-specifieke opmerkingen

• 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

• De interface die het definieert: CanvasRenderingContext2D
• CanvasRenderingContext2D.globalAlpha