HTML5 Canvas Reference - clip()

By using the Canvas clipping region, we can limit the drawing area for a path and its subpaths.

We do this by first setting rect() attribute of the context to a rectangle that encompasses the region we would like to draw in and then calling the clip() function.

This will set the clip region to be the rectangle we defined with the rect() method call.

Now, what we draw onto the current context will display only the portion that is in this region.

Browser compatibility


`clip()`	Yes	Yes	Yes	Yes	Yes

JavaScript syntax

context.clip();

Example


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
    <!--from  w w w  .  j a v  a2 s.  c  o  m-->
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    
    ctx.fillStyle = 'black';
    ctx.save();
    ctx.beginPath();
    ctx.arc(150, 150, 140, 0, 2 * Math.PI);
    ctx.clip();
    ctx.fillRect(0, 0, 600, 300);
    ctx.restore();
    ctx.beginPath();
    ctx.arc(450, 150, 140, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
</script> 
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows the effect of clipping.


<!DOCTYPE html>
<html>
<body>
<span>No clip</span>
<canvas id="myCanvas" width="300" height="140"></canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    <!--from  www .  ja  va2s  .co m-->
    ctx.rect(40, 20, 200, 120);
    ctx.stroke();
    
    ctx.fillStyle = "yellow";
    ctx.fillRect(0, 0, 140, 100);
</script> 

<span>Clip</span>
<canvas id="myCanvas2" width="300" height="140"></canvas>

<script>
    var c = document.getElementById("myCanvas2");
    var ctx = c.getContext("2d");
    
    ctx.rect(40, 20, 200, 120);
    ctx.stroke();
    ctx.clip();//clip
    
    ctx.fillStyle = "yellow";
    ctx.fillRect(0, 0, 140, 100);

</script> 

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to draw a circle and clip to it.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
    var canvas= document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
<!--   w  w w  .j a  va  2 s  .  c  o  m-->
    var w = canvas.width;
    var h = canvas.height;
    // cdraw a cross
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(w, h);
    ctx.moveTo(w, 0);
    ctx.lineTo(0, h);
    ctx.stroke();
    // draw a circle and clip to it
    ctx.beginPath();
    ctx.arc(w / 2, h / 2, w / 4, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.clip();
    // clear the contents of the circle - erases the center of the cross
    ctx.clearRect(0, 0, w, h);
    // draw horizontal lines across the whole canvas, but clipped to the circle
    ctx.beginPath();
    for (var y = 0; y < h; y += 10) {
        ctx.moveTo(0, y);
        ctx.lineTo(w, y);
    }
    ctx.stroke();
</script>
</body>
</html>

The code above is rendered as follows: