You can clip a region of any shape and size from your original
canvas using the clip() method. Once a region is clipped, all future grawings will
be limited to the clipped region and you won't have access to other regions on the
canvas. You can however save the current canvas region using the save() method before
you do any clipping, and restore
it any time in the future.
Let's say we have a canvas that is 600 X 500 pixels.
<canvas id = "canvas" width = "600" height="500"></canvas>
We will save the context before we clip from this canvas.
ctx.save();
We will now clip a circular region off this canvas.
We will now try to fit a 600 X 500 image on this canvas
ctx.drawImage(dove,0,0);
When the above code is executed, you should see the dove image visible only within
the circular region.
If you want to get the canvas back to 600 X 500 dimensions, use the restore method
at this point.
ctx.restore();
HTML Code
<html>
<head>
<script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
var dove = new Image()
dove.src = "Doves.png";
//Clipping region specifications
var centreX = 600;
var centreY = 130;
var radius = 50;
var startAngle = 0 * Math.PI/180;
var endAngle = 360 * Math.PI/180;
ctx.drawImage(dove,0,0);
//Let's clip in a circular region out of the canvas
ctx.beginPath();
ctx.arc(centreX, centreY, radius, startAngle, sendAngle, false);
ctx.closePath();
ctx.clip();
//Draw a 500X300 image inside the circularly clipped region
ctx.drawImage(dove, 400,0);
