HTML Reference Manual

HTML tag大全

HTML canvas isPointInPath() method

isPointInPath() is a Canvas 2D API is used to determine whether the detection point is contained in the current path.

Online Example

If the point 20,50 is located on the current path, then draw a rectangle:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas isPointInPath() method usage-Basic Tutorial(oldtoolbag.com)</<title>
</<head>
<body>
<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");
ctx.rect(20,20,150,100));
if(ctx.isPointInPath(20,50))
{
　　　　ctx.stroke();
};
</script>
</body>
</html>

Test and see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome, and Safari support isPointInPath() Method.

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

Definition and usage

If the specified point is within the current path, the isPointInPath() method returns true; otherwise, it returns false

JavaScript syntax:	context.isPointInPath(x,y);

Parameter value

Parameter	Description
x	The x-coordinate to be tested.
y	The y-coordinate to be tested.

HTML canvas reference manual

HTML: <template> tag