Online tool

Reference manual

: <progress> tag

HTML canvas clip() method 2clip() is a Canvas

D API sets the currently created path as the current clipping path method.

Online example200 * 12A 0-pixel rectangular area is cut from the canvas. Then, draw a red rectangle. Only the red rectangle part is located in the clipping area:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas clip() method usage-Basic Tutorial(oldtoolbag.com)</<title>
</<head>
<body>
<span>clip() has not been performed:</span>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//　Draw a rectangle
ctx.rect(50,20,200,120);
ctx.stroke();
//　Draw a red rectangle
ctx.fillStyle="red";
ctx.fillRect(0,0,150,100);
</script>　
<span>clip() has been performed:</span>
<canvas id="myCanvas2" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
//Cut a rectangular area
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
//Draw a rectangle after clipping
ctx.fillStyle="red";
ctx.fillRect(0,0,150,100);
</script>　
</body>
</html>

Test to see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9and Firefox, Opera, Chrome, and Safari support clip() method.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Definition and usage

The clip() method clips any shape and size of an area from the original canvas.

Tip:After clipping an area, all subsequent graphics will be confined to the clipped area (cannot access other areas of the canvas). However, you can save the current canvas area using the save() method before using the clip() method, and restore it at any later time (using the restore() method).

JavaScript syntax:	context.clip();

HTML canvas reference manual

HTML: <template> tag