YouTip

# HTML Canvas isPointInPath() Method The `isPointInPath()` method of the Canvas 2D API is a powerful built-in tool used to determine whether a specified point lies within the boundaries of the current path. It returns a boolean value: `true` if the point is inside the path, and `false` otherwise. This method is essential for implementing interactive canvas elements, such as hit detection, clickable shapes, and custom drag-and-drop interfaces. --- ## Syntax ```javascript context.isPointInPath(x, y); context.isPointInPath(x, y, fillRule); context.isPointInPath(path, x, y); context.isPointInPath(path, x, y, fillRule); ``` ### Parameter Values | Parameter | Type | Description | | :--- | :--- | :--- | | `x` | Number | The x-coordinate of the point to test. | | `y` | Number | The y-coordinate of the point to test. | | `fillRule` *(Optional)* | String | The algorithm to determine if a point is inside or outside the path.
• `"nonzero"`: The non-zero winding rule (default).
• `"evenodd"`: The even-odd winding rule. | | `path` *(Optional)* | Path2D | A `Path2D` object to test against. If not specified, the current default path is used. | ### Return Value * **`true`**: If the specified point `(x, y)` is located inside the boundary of the path. * **`false`**: If the point is outside the path. --- ## Code Examples ### Example 1: Basic Hit Detection This example draws a rectangle and checks if the point `(20, 50)` is inside it. If it is, the rectangle's border is stroked. ```html Your browser does not support the HTML5 canvas tag. ``` ### Example 2: Interactive Click Detection (Hit Test) You can use `isPointInPath()` inside an event listener to detect when a user clicks on a specific shape. ```javascript const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // Create a circular path ctx.arc(150, 75, 50, 0, 2 * Math.PI); ctx.fillStyle = 'blue'; ctx.fill(); // Listen for click events on the canvas canvas.addEventListener('click', function(event) { // Get click coordinates relative to the canvas const rect = canvas.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; // Check if the click was inside the circle if (ctx.isPointInPath(x, y)) { alert('You clicked inside the circle!'); } else { alert('You clicked outside the circle.'); } }); ``` --- ## Key Considerations ### 1. Coordinate System Alignment The coordinates passed to `isPointInPath(x, y)` must be relative to the canvas element's coordinate system, not the viewport. If you are using mouse or touch events, you must convert the client coordinates (`clientX`, `clientY`) to canvas-relative coordinates. ### 2. The "Current Path" Behavior `isPointInPath()` checks the **current** path. If you draw multiple shapes using the default path, `isPointInPath()` will only check the most recently defined path unless you use `beginPath()` to separate them, or use `Path2D` objects. ### 3. Using Path2D for Multiple Shapes If you need to manage hit detection for multiple distinct shapes, it is highly recommended to use `Path2D` objects. This allows you to store paths in variables and test against them individually: ```javascript const circlePath = new Path2D(); circlePath.arc(50, 50, 30, 0, 2 * Math.PI); const rectPath = new Path2D(); rectPath.rect(150, 20, 100, 60); // Test against specific Path2D objects if (ctx.isPointInPath(circlePath, 50, 50)) { // Point is inside the circle } ``` --- ## Browser Support The `isPointInPath()` method is widely supported across all modern web browsers: * Google Chrome * Mozilla Firefox * Microsoft Edge / Internet Explorer 9+ * Safari * Opera *Note: Internet Explorer 8 and earlier versions do not support the `` element.*