Canvas clip() Method
Definition and Usage
clip() Methods can clip any shape and size from the original canvas.
Tip:Once an area is clipped, all subsequent drawings will be restricted to the clipped area (cannot access other areas on the canvas). You can also save the current canvas area before using the clip() method by using the save() method and restore it at any later time (using the restore() method).
Example
Clip a 200*120 pixel rectangular area from the canvas. Then, draw a green rectangle. Only the green rectangle part within the clipped area is visible:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Clip the rectangular area
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// After clip() draw a green rectangle
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
Syntax
context.clip();
Browser Support
The numbers in the table indicate the first browser version that fully supports this property.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
