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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>    

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>             

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>              

chevron_right


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

  • Google Chrome
  • Internet Explorer 9.0
  • Firefox
  • Safari
  • Opera


My Personal Notes arrow_drop_up

Budding Web DeveloperKeen learnerAverage CoderDancer&Social Activist

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.