Open In App

HTML canvas isPointInPath() Method

Last Updated : 09 Jun, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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


Previous Article
Next Article

Similar Reads

HTML canvas rect() Method
The rect() method in HTML is used to create a rectangle in HTML. Syntax: context.rect(x, y, width, height) Parameters: x: It stores the x-coordinate of the top-left corner of the rectangle.y: It stores the y-coordinate of the top-left corner of the rectangle.width: It stores the width in pixel.height: It stores the height in pixel. Example-1: C/C++
1 min read
HTML canvas clearRect() Method
The clearRect() method is used to clear the specified pixels within a given rectangle. Syntax: context.clearRect( x, y, width, height ) Parameters: x: It stores the x-coordinate of the top-left corner of the rectangle.y: It stores the y-coordinate of the top-left corner of the rectangle.width: It stores the width in pixel.height: It stores the heig
1 min read
HTML canvas strokeRect() Method
The strokeRect() method is used to draw the rectangle in a given color. The default color of the stroke is black. Syntax: context.strokeRect(x, y, width, height) Parameters: x: It stores the x-coordinate of the top-left corner of the rectangle.y: It stores the y-coordinate of the top-left corner of the rectangle.width: It stores the width in pixels
1 min read
HTML canvas fillRect() Method
The fillRect() method is used to fill the rectangle using the given color. The default color of the fillRect() method is black. Syntax: context.fillRect( x, y, width, height ) Parameters: This method accepts four parameters as mentioned above and described below: x: It stores the x-coordinate of top-left corner of rectangle.y: It stores the y-coord
1 min read
HTML canvas fill() Method
The canvas fill() Method is used to fill the current drawing path. The default color of the canvas fill() method is black. Syntax: context.fill() Example-1: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; HTML canvas fill() Method &lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id=&quot;GFG&quot; width=&quot;500&quot;
1 min read
HTML canvas stroke() Method
The canvas stroke() method is used to draw the path you have defined with all those moveTo() and lineTo() methods. The default color of the canvas stroke() method is black. Syntax: context.stroke() Example-1: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; HTML canvas stroke() Method &lt;/title&gt; &lt;/head&gt; &lt;body
1 min read
HTML canvas translate() Method
The HTML canvas translate() Method is used to specify that the object is translated by given translate amount. Syntax: context.translate(x, y) Parameter Values: x: It stores the value, that how much the canvas will move left or right means x-axis wise.y: It stores the value, that how much the canvas will move up and down means y-axis wise. Example
2 min read
HTML canvas rotate() Method
The HTML canvas rotate() Method is used to rotate the drawing by a given angle. Note that the rotation will only work on the canvas that was made after the rotation was done. Syntax: context.rotate(angle) Parameter Values: angle: It stores the rotation angle in radians. If the angle is given in the form of a degree then it converts into a radian by
1 min read
HTML canvas scale() Method
The HTML canvas scale() Method is used to scale the current drawing into smaller or larger size. After scaling the drawing, all the feature of drawing scaled. It will have to define before the canvas. Syntax: context.scale( scalewidth, scaleheight ) Parameter Values: scalewidth: It scale the width of current drawing, (1=100%, 0.5=50%, 2=200%, and s
2 min read
HTML canvas createLinearGradient() Method
The HTML Canvas createLinearGradient() method is used to create a linear gradient object. The gradient can be used to fill different colors in rectangles, circles, lines, text, etc. We can then assign the gradient color to the strokeStyle or fillStyle properties to fill or draw shapes such as rectangles, circles, lines, text, etc. The addColorStop(
2 min read