HTML Canvas - isPointInStroke() Method

The HTML Canvas isPointInStroke() method of the Canvas 2D API checks whether the specified point is inside the stroked path or not and reports it using Boolean value.

Syntax

Following is the syntax of HTML Canvas isPointInStroke() method −

CanvasRenderingContext2D.isPointInStroke(x, y, path);

Parameters

Following is the list of parameters of this method −

S.No	Parameter & Description
1	x The x co-ordinate of the point to check.
2	y The y co-ordinate of the point to check.
3	path Path which is to be referred to check if the provided point is available inside of it or not. If no path is given, current path is used.

Return Values

When a CanvasRenderingContext2D interface context object access isPointInStroke() method, it returns a Boolean value whether the point is available inside the stroked path or not.

Example 1

The following example draws a triangle inside the Canvas element and checks whether the given point is inside it or not using HTML Canvas isPointInStroke() method.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body onload="Context();">
   <canvas id="canvas" width="200" height="200" style="border: 1px solid black;"></canvas>
   <p>Check the given shape is stroked or not at the given point : <code id="check">false</code>
   </p>
   <script>
      function Context() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         var check = document.getElementById("check");
         context.beginPath();
         context.moveTo(100, 50);
         context.lineTo(50, 100);
         context.lineTo(150, 100);
         context.lineTo(100, 50);
         context.fillStyle = 'brown';
         context.fill();
         context.closePath();
         check.innerText = context.isPointInStroke(150, 150);
      }
   </script>
</body>
</html>

Output

The output returned by the above code on the webpage as −

Example 2

The following example draws text inside the Canvas element and checks whether the given point is inside it or not.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body onload="Context();">
   <canvas id="canvas" width="200" height="100" style="border: 1px solid black;"></canvas>
   <p>Check the given shape is stroked or not at the given point : <code id="check">false</code>
   </p>
   <script>
      function Context() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         var check = document.getElementById("check");
         context.font = '55px Verdana';
         context.fillStyle = 'green';
         context.fillText('Hello', 10, 50);
         check.innerText = context.isPointInStroke(100, 30);
      }
   </script>
</body>
</html>

Output

The output returned by the above code on the webpage as −

Example 3

The following example adds strokes to a rectangle inside the Canvas element and checks whether the given point is inside it or not.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body onload="Context();">
   <canvas id="canvas" width="200" height="150" style="border: 1px solid black;"></canvas>
   <p>Check the given shape is stroked or not at the given point : <code id="check">false</code>
   </p>
   <script>
      function Context() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         var check = document.getElementById("check");
         context.strokeStyle = 'grey';
         context.strokeRect(20, 20, 150, 100);
         check.innerText = context.isPointInStroke(100, 100);
      }
   </script>
</body>
</html>

Output

The output returned by the above code on the webpage as −

html_canvas_paths.htm