HTML canvas clip () method
Examples
Cut a rectangular area 200 * 120 pixels from the canvas. Then, draw a red rectangle. Only the red rectangular portion is cut in the region are 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"
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome and Safari support clip () method.
Note: 8 and earlier versions of Internet Explorer do not support the <canvas> element.
Definition and Usage
clip () method cut any shape and size from the original canvas.
Tip: Once you cut a certain area, all subsequent drawing will be limited to the area to be cut (not access other areas on the canvas). You can also use the clip () method before () method on the current canvas area saved by using the save, and recover (by restore () method) in the future any time.
| JavaScript syntax: | context .clip (); |
|---|
HTML canvas Reference Manual