The CanvasRenderingContext2D
.isPointInPath()
method of the Canvas 2D API reports whether or not the specified point is contained in the current path.
Syntax
ctx.isPointInPath(x, y [, fillRule]); ctx.isPointInPath(path, x, y [, fillRule]);
Parameters
x
- The x-axis coordinate of the point to check, unaffected by the current transformation of the context.
y
- The y-axis coordinate of the point to check, unaffected by the current transformation of the context.
fillRule
- The algorithm by which to determine if a point is inside or outside the path.
Possible values:"nonzero"
: The non-zero winding rule. Default rule."evenodd"
: The even-odd winding rule.
path
- A
Path2D
path to check against. If unspecified, the current path is used.
Return value
Boolean
- A Boolean, which is
true
if the specified point is contained in the current or specified path, otherwisefalse
.
Examples
Checking a point in the current path
This example uses the isPointInPath()
method to check if a point is within the current path.
HTML
<canvas id="canvas"></canvas> <p>In path: <code id="result">false</code></p>
JavaScript
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const result = document.getElementById('result'); ctx.rect(10, 10, 100, 100); ctx.fill(); result.innerText = ctx.isPointInPath(30, 70);
Result
Checking a point in the specified path
Whenever you move the mouse, this example checks whether the cursor is in a circular Path2D
path. If yes, the circle becomes green, otherwise it is red.
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // Create circle const circle = new Path2D(); circle.arc(150, 75, 50, 0, 2 * Math.PI); ctx.fillStyle = 'red'; ctx.fill(circle); // Listen for mouse moves canvas.addEventListener('mousemove', function(event) { // Check whether point is inside circle if (ctx.isPointInPath(circle, event.offsetX, event.offsetY)) { ctx.fillStyle = 'green'; } else { ctx.fillStyle = 'red'; } // Draw circle ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fill(circle); });
Result
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'CanvasRenderingContext2D.isPointInPath' in that specification. |
Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
isPointInPath | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 2 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Path parameter | Chrome Full support Yes | Edge Full support ≤18 | Firefox Full support 31 | IE No support No | Opera Full support Yes | Safari No support No | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 31 | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
Gecko-specific note
- Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4), this method incorrectly failed to multiply the specified point's coordinates by the current transformation matrix before comparing it to the path. Now this method works correctly even if the context is rotated, scaled, or otherwise transformed.
See also
- The interface defining this method:
CanvasRenderingContext2D