The clip() method is used to clip a region/part of any shape and size from the given/original canvas. After clipping a region, the further drawings can be applied only on the clipped region. Although save() and restore() method can be used to get back to the previous canvas.
Syntax:
context.clip();
Example:
<!DOCTYPE html> < html >
< head >
< title >
HTML canvas clip() Method
</ title >
</ head >
< body style = "text-align:left;" >
< h1 >GeeksforGeeks</ h1 >
< h2 >HTML canvas clip() Method</ h2 >
< h2 >Before clip():</ h2 >
< canvas id = "GFG" width = "500" height = "200" style = "border:2px solid" >
</ canvas >
< script >
var doc_id = document.getElementById("GFG");
var context = doc_id.getContext("2d");
// Draw a rectangle
context.rect(100, 20, 200, 120);
context.stroke();
// Draw green rectangle
context.fillStyle = "green";
context.fillRect(50, 50, 150, 100);
</ script >
< h2 >After clip():</ h2 >
< canvas id = "GFG2" width = "500" height = "200" style = "border:2px solid ;" >
</ canvas >
< script >
var doc_id = document.getElementById("GFG2");
var context = doc_id.getContext("2d");
// Clip a region
context.rect(100, 20, 200, 120);
context.stroke();
context.clip();
// Draw green rectangle after clip()
context.fillStyle = "green";
context.fillRect(50, 50, 150, 100);
</ script >
</ body >
</ html >
|
Output:
Supported Browsers: The browser supported by HTML canvas clip() Method are listed below:
- Google Chrome
- Internet Explorer 9.0
- Firefox
- Safari
- Opera