Setting a Clipping Region
Having wanted to find this out for a recent project I thought I would share this here. When drawing to an HTML5 Canvas the default clipping region is the size of the canvas. But what if you want to change the clipping area?
<body onload="drawCanvas();">
<div>
<canvas id="myCanvas" width="300" height="150">
<p>Your browser doesn't support canvas.</p>
</canvas>
</div>
</body>
function drawCanvas() {
// Get our Canvas element
var surface = document.getElementById("myCanvas");
if (surface.getContext) {
// If Canvas is supported
var context = surface.getContext('2d');
// Draw a red circle
context.beginPath();
context.arc(60, 60, 40, 0, Math.PI * 2, false);
context.closePath();
context.fillStyle = "#ff0000";
context.fill();
// Set the clipping area
context.beginPath();
context.rect(0, 0, 300, 60);
context.clip();
// Draw the circle again
context.beginPath();
context.arc(150, 60, 40, 0, Math.PI * 2, false);
context.closePath();
context.fillStyle = "#ff0000";
context.fill();
}
}
Here we draw two Red circles, the first is drawn with the default clipping region set which starts at 0,0 and finishes at 300,150 (the dimensions of our Canvas element).
Before we draw the 2nd circle we define our new clipping region using the rect() method which takes the following parameters: left, top, right, bottom. When we have defined our clipping area we call clip() which sets it. All future rendering will have that clipping region applied.
If you want to save the current rendering state (which includes the clipping region) you can call the save() method on the graphics context before you change the state. Using restore() can then be used to quickly set the rendering state back to what it was when you last called save().
Rate this:
1 Star
2 Star
3 Star
4 Star
5 Star
12 Ratings / 4.3 Average