HTML canvas isPointInPath() Method

The canvas isPointInPath() Method is used to check whether or not the specified point is contained in the current path. The isPointInPath() method returns true if the specified point is in the current path, otherwise false. Syntax:

context.isPointInPath( x, y );

Parameters: This method accepts two parameters as mentioned above and described below:

x: This parameter specifies the x-axis coordinate point to check.
y:: This parameter specifies the y-axis coordinate point to check.

Example 1: The triangle will be drawn if point (150, 150) is in the path.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML canvas isPointInPath() Method
    </title>
</head>

<body style="text-align:center;">
    
    <h1>GeeksforGeeks</h1>
    
    <h2>HTML canvas isPointInPath() Method</h2>
    
    <canvas id="GFG" width="500" height="300" >
    </canvas>
    
    <script>
        var doc_id = document.getElementById("GFG");
        var context = doc_id.getContext("2d");
        
        context.beginPath();
        context.moveTo(100, 100);
        context.lineTo(100, 300);
        context.lineTo(300, 300);
        context.closePath();
        
        if (context.isPointInPath(150, 150)) {
            context.stroke();
        };
    </script>
</body>

</html>

Example 2: When the point is in the path, boolean value true is returned.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML canvas isPointInPath() Method
    </title>
</head>

<body style="text-align:center;">
    
    <h1>GeeksforGeeks</h1>
    
    <h2>HTML canvas isPointInPath() Method</h2>
    
    <canvas id="GFG" width="500" height="300" >
    </canvas>
    
    <h3>
        in path: <code id="result">false</code>
    </h3>
    
    <script>
        var doc_id = document.getElementById('GFG');
        var context = doc_id.getContext('2d');
        var result = document.getElementById('result');
        context.rect(10, 10, 100, 100);
        context.fillStyle = 'green';
        context.fill();
        result.innerText = context.isPointInPath(10, 70);
    </script>
</body>

</html>

Example 3: When point is not in the path, boolean value false is returned.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML canvas isPointInPath() Method
    </title>
</head>

<body style="text-align:center;">
    
    <h1>GeeksforGeeks</h1>
    
    <h2>HTML canvas isPointInPath() Method</h2>
    
    <canvas id="GFG" width="500" height="300" >
    </canvas>
    
    <h3>
        in path: <code id="result">false</code>
    </h3>
    
    <script>
        var doc_id = document.getElementById('GFG');
        var context = doc_id.getContext('2d');
        var result = document.getElementById('result');
        context.rect(10, 10, 100, 100);
        context.fillStyle = 'green';
        context.fill();
        result.innerText = context.isPointInPath(110, 170);
    </script>
</body>

</html>

Supported Browsers: The browsers supported by canvas isPointInPath() method are listed below:

Google Chrome
Internet Explorer 9.0
Firefox
Safari
Opera

HTML canvas isPointInPath() Method

Explore