Last week, we saw how to draw a custom shape in HTML5 Canvas. What if you want to draw a shape inside another shape? For instance, lets assume you created a cloud shape and want to draw three circles inside it. To do that, you need to create a cloud shape first, then define a clipping region and then draw three circles. In terms of coding, you start by drawing a path, then use clip() method of the canvas context and now whatever is drawn afterwards are bound inside the clipped region. In our case, the clipped region is a cloud. Got it?
Ok! Lets see the said example in coding.
Step 1: The first thing we should do is to use save() method to save the Canvas context, so that it can be restored to default state later. Next, we will use bezierCurveTo() method to create a cloud shape. Once the shape is ready, define the clipping region using clip() method. Checkout the code below.
<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();
</script>Now we have created a clipping region, but nothing will be drawn to the canvas until stroke() method is called. It means, we have only defined what will be our clipping region. In our case, cloud created using bezierCurveTo is the clipping region.
Step 2: Everything that is drawn after step 1 will be bound to the defined clipping region. Lets draw three circles now.
// 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();
Step 3: Restore the saved canvas context using restore() method.
context.restore();
Step 4: Draw the region.
//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();
That’s it! You should see three overlapped circles clipped inside a cloud. Checkout the demo and share with HTML5 Community.
