The clip() method is used to clip a region of any shape and size from the original canvas.
<!DOCTYPE html>
<html>
<head>
<title>Drawing </title>
</head>
<body>
<canvas id ="myCanvas" width ="600" height ="400" style="border: 1px solid blue;" >
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// Draw a red circle
context.beginPath();
context.arc(60, 60, 40, 0, Math.PI * 2, false);
context.closePath();
context.fillStyle = "#ff0000";
context.fill();
// Set the clipping area
context.beginPath();
context.rect(0, 0, 300, 60);
context.clip();
// Draw the circle again
context.beginPath();
context.arc(150, 60, 40, 0, Math.PI * 2, false);
context.closePath();
context.fillStyle = "#ff0000";
context.fill();
</script>
</body>
</html>
——————————————————-
using html5 canvas clipping region tutorial code out put
—————- ———————-
clipping region tutorial live demo on codepen
[codepen_embed height=500 theme_id=1 slug_hash=’yyjBJK’ user=’aslamwaqar’ default_tab=’html’
animations=’run’]
[/codepen_embed]
—————————————
the clipping region and other html5 canvas live demo
Codepen.io
—————————————
