Multiple clipping subpaths example

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,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.moveTo(100, 100);
ctx.arc(100,100,60,0,Math.PI*2,true);

ctx.closePath();


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

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