<!DOCTYPE html>
<html>
<head>
<title>wikitechy clip method in canvas</title>
</head>
<body>
<h2>wikitechy clip method in canvas</h2>
<span>Without clip():</span>
<canvas id="wikitechyCanvas" width="300" height="150"
style="border:1px solid blue;">
</canvas>
<script>
var c = document.getElementById("wikitechyCanvas");
var context = c.getContext("2d");
context.rect(40, 20, 200, 120);
context.stroke();
context.fillStyle = "orange";
context.fillRect(10, 10, 150, 100);
</script>
<span>With clip():</span>
<canvas id="wikitechyCanvas1" width="300" height="150"
style="border:1px solid blue;">
</canvas>
<script>
var c = document.getElementById("wikitechyCanvas1");
var context = c.getContext("2d");
context.rect(40, 20, 200, 120);
context.stroke();
context.clip();
context.fillStyle = "orange";
context.fillRect(10, 10, 150, 100);
</script>
</body>
</html>
<html>
<head>
<title>wikitechy clip method in canvas</title>
</head>
<body>
<h2>wikitechy clip method in canvas</h2>
<span>Without clip():</span>
<canvas id="wikitechyCanvas" width="300" height="150"
style="border:1px solid blue;">
</canvas>
<script>
var c = document.getElementById("wikitechyCanvas");
var context = c.getContext("2d");
context.rect(40, 20, 200, 120);
context.stroke();
context.fillStyle = "orange";
context.fillRect(10, 10, 150, 100);
</script>
<span>With clip():</span>
<canvas id="wikitechyCanvas1" width="300" height="150"
style="border:1px solid blue;">
</canvas>
<script>
var c = document.getElementById("wikitechyCanvas1");
var context = c.getContext("2d");
context.rect(40, 20, 200, 120);
context.stroke();
context.clip();
context.fillStyle = "orange";
context.fillRect(10, 10, 150, 100);
</script>
</body>
</html>
Result