Related Articles

Related Articles

HTML | canvas isPointInPath() Method
  • Last Updated : 25 Jul, 2019

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

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :