HTML canvas clip()Method
Canvas ObjectExamples
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 arbitrary shapes and sizes from the original canvas.
Tip:Once a region is clipped, all subsequent drawing will be limited to the clipped region (cannot access other areas of 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 time later (via the restore() method).
| JavaScript Syntax: | context.clip(); |
|---|
Other Extensions