Skip to content
Related Articles

Related Articles

Improve Article

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.




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




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




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

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :