Multiple clipping subpaths example Approach II

another approach using globalCompositeOperation

by dipish

HTML

<canvas id="canvas" width="500" height="500"></canvas>

JavaScript

var W = 500;
var H = 500;
var ctx = document.getElementById('canvas').getContext('2d');
  // Create a circular clipping path        
ctx.beginPath();

ctx.moveTo(100, 100);
ctx.arc(100,100,60,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();

ctx.globalCompositeOperation = 'destination-out';

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.arc(100,100,10,0,Math.PI*2,false);
ctx.moveTo(70, 70);
ctx.arc(70,70,10,0,Math.PI*2,false);
ctx.moveTo(130, 130);
ctx.arc(130,130,10,0,Math.PI*2,false);
ctx.closePath();
ctx.fill();


//ctx.closePath();
//ctx.clip();

//ctx.fillRect(0,0,W,H);