Canvas clip() Method
Example
Clip a 200*120 pixels region from the context. Then, draw a red rectangle. Only the part of the red rectangle that is inside the clipped area is visible:
Without clip():
With clip():
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.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 »
Description
The clip() method clips a region of any size from the original context.
Note
When a region is clipped, future drawing is limited to the clipped region.
However, you can save the context settings with the save() method before using the clip() method, and use restore() to restore it later.
Syntax
| context.clip(); |
Parameters
| NONE |
Return Value
| NONE |
Browser Support
The <canvas> element is an HTML5 standard (2014).
clip() is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |
❮ Canvas Reference
