Demo - Canvas Clipping region Tutorial
Refer Tutorial
Clipping Region
<canvas id="clip" width="580" height="200"></canvas>
<script>
var canvas = document.getElementById('clip');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 70;
context.save();
context.beginPath();
context.moveTo(185, 90);
context.bezierCurveTo(130, 100, 140, 150, 240, 150);
context.bezierCurveTo(260, 190, 330, 190, 350, 160);
context.bezierCurveTo(430, 160, 430, 130, 400, 100);
context.bezierCurveTo(440, 50, 380, 40, 350, 60);
context.bezierCurveTo(330, 15, 260, 30, 260, 60);
context.bezierCurveTo(210, 15, 160, 30, 180, 90);
context.clip();
// Circle one
context.beginPath();
context.arc(x, y,radius, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
//Circle Two
context.beginPath();
context.arc(x + 30, y + 30, radius, 0, 2 * Math.PI, false);
context.fillStyle = '#eeeeee';
context.fill();
//Circle Three
context.beginPath();
context.arc(x - 30, y - 40 , radius, 0, 2 * Math.PI, false);
context.fillStyle = '#ea5145';
context.fill();
//Draw region
context.beginPath();
context.moveTo(185, 90);
context.bezierCurveTo(130, 100, 140, 150, 240, 150);
context.bezierCurveTo(260, 190, 330, 190, 350, 160);
context.bezierCurveTo(430, 160, 430, 130, 400, 100);
context.bezierCurveTo(440, 50, 380, 40, 350, 60);
context.bezierCurveTo(330, 15, 260, 30, 260, 60);
context.bezierCurveTo(210, 15, 160, 30, 180, 90);
context.lineWidth=10;
context.strokeStyle = 'blue';
context.stroke();
</script>
Beginners guide to HTML5 Canvas - Draw shapes
Learn to draw Lines in Canvas
