HTML canvas clip()Method
Example
Clip a 200*120 pixel rectangular area from the canvas. Then, draw a red rectangle. Only the part of the red rectangle inside the clipped area is visible:
JavaScript：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Clip a rectangular area
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip()
ctx.fillStyle="red";
ctx.fillRect(0,0,150,100);
</script>
var ctx=c.getContext("2d");
// Clip a rectangular area
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip()
ctx.fillStyle="red";
ctx.fillRect(0,0,150,100);
</script>
Try it Yourself »
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the clip() method.
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
Definition and Usage
The clip() method clips an arbitrary shape and size from the original canvas.
Tip:Once a region is clipped, all subsequent drawing will be limited to the clipped region (other areas on the canvas cannot be accessed). You can also save the current canvas region by using the save() method before using clip(), and restore it at any time later (with the restore() method).
| JavaScript Syntax: | context.clip(); |
|---|
HTML canvas Reference Other Extensions