HTML | canvas isPointInPath() Method - GeeksforGeeks

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 HTML concepts with the Web Design for Beginners | HTML  course.
HTML-Canvas
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript