YouTipMet Canvas Clip
# HTML canvas clip() Method
[ Canvas Object](#)
## Example
Clip a 200*120 pixel rectangular area from the canvas. Then, draw a red rectangle. Only the part of the red rectangle within the clipped area is visible:
YourbrowserdoesnotsupporttheHTML5canvastag.
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);
[Try it Β»](#)
* * *
## 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 element.
* * *
## Definition and Usage
The clip() method clips an arbitrary shape and size from the original canvas.
**Tip:** Once an area is clipped, all subsequent drawing operations are restricted to the clipped area (you 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 time later (using the restore() method).
| JavaScript Syntax: | _context_.clip(); |
| --- |
* * Canvas Object](#)