Canvas Compositing Playground

by Francisco Maria Calisto

HTML

<canvas id="canvas" width="300" height="300"></canvas><br>
<select id="compositingType" onchange="draw();">
<option value="source-over">source-over</option>
<option value="source-in">source-in</option>
<option value="source-out">source-out</option>
<option value="source-atop">source-atop</option>
<option value="lighter">lighter</option>
<option value="destination-over">destination-over</option>
<option value="destination-in">destination-in</option>
<option value="destination-out">destination-out</option>
<option value="destination-atop">destination-atop</option>
<option value="xor">xor</option>
</select>

CSS

canvas {
    border: 1px red solid;
}

JavaScript

function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    // clear and set compositing to default (source-over)
    ctx.clearRect(0,0,300,300);
    ctx.globalCompositeOperation = 'source-over';
    
    // draw rectangle
    ctx.fillStyle = "#FF3366";
    ctx.fillRect(15,15,70,70);
    
    // set composite property
    ctx.globalCompositeOperation = document.getElementById('compositingType').value;
    
    // draw circle
    ctx.fillStyle = "#0066FF";
    ctx.beginPath();
    ctx.arc(75,75,35,0,Math.PI*2,true);
    ctx.fill();
    
}

document.addEventListener('DOMContentLoaded', draw, false);