<!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
>