Canvas clip

by MICHI CHEN

HTML

<canvas id="myCanvas" width="210" height="210"></canvas>

JavaScript

$(function(){
	var ctx=$('#myCanvas')[0].getContext('2d');
  var _x=$('#myCanvas').width()/2;
  var _y=$('#myCanvas').height()/2;
  var radius=100;
  var offset=65;
  ctx.save();
  
  ctx.beginPath();
  ctx.arc(_x,_y,radius,0,2*Math.PI,false);
  ctx.clip();
  
  ctx.beginPath();
  ctx.arc(_x-offset,_y-offset,radius,0,2*Math.PI,false);
  ctx.fillStyle='#0D4351';
  ctx.fill();
  
  ctx.beginPath();
  ctx.arc(_x+offset,_y,radius,0,2*Math.PI,false);
  ctx.fillStyle='#EA4881';
  ctx.fill();
  
  ctx.beginPath();
  ctx.arc(_x,_y+offset,radius,0,2*Math.PI,false);
  ctx.fillStyle='#6BD1EA';
  ctx.fill();
  
  ctx.restore();
  ctx.beginPath();
  ctx.arc(_x,_y,radius,0,2*Math.PI,false);
  ctx.lineWidth=5;
  ctx.strokeStyle='#66B79B';
  ctx.stroke();
});