<!DOCTYPE html> <html> <head> <style> canvas { display: inline-block; } </style> </head> <body> <canvas id="source-over" width="80" height="80"></canvas> <canvas id="source-in" width="80" height="80"></canvas> <canvas id="source-out" width="80" height="80"></canvas> <canvas id="source-atop" width="80" height="80"></canvas> <br> <canvas id="destination-over" width="80" height="80"></canvas> <canvas id="destination-in" width="80" height="80"></canvas> <canvas id="destination-out" width="80" height="80"></canvas> <canvas id="destination-atop" width="80" height="80"></canvas> <br> <canvas id="lighter" width="80" height="80"></canvas> <canvas id="xor" width="80" height="80"></canvas> <script> var compositeOps = [ 'source-over', 'source-in', 'source-out', 'source-atop', 'destination-over', 'destination-in', 'destination-out', 'destination-atop', 'lighter', 'xor' ]; for (var i = 0; i < compositeOps.length; i++) { var op = compositeOps[i]; var ctx = document.getElementById(op).getContext('2d'); ctx.fillStyle = 'red'; ctx.fillRect(5, 5, 40, 40); ctx.globalCompositeOperation = op; ctx.fillStyle = 'deepskyblue'; ctx.beginPath(); ctx.arc(45,45,20,0,Math.PI*2,true); ctx.fill(); } </script> </body> </html>