Web/API/CanvasRenderingContext2D/isPointInStroke
The CanvasRenderingContext2D
.isPointInStroke()
method of the Canvas 2D API reports whether or not the specified point is inside the area contained by the stroking of a path.
Syntax
ctx.isPointInStroke(x, y); ctx.isPointInStroke(path, x, y);
Parameters
x
- The x-axis coordinate of the point to check.
y
- The y-axis coordinate of the point to check.
path
- A
Path2D
path to check against. If unspecified, the current path is used.
Return value
Boolean
- A Boolean, which is
true
if the point is inside the area contained by the stroking of a path, otherwisefalse
.
Examples
Checking a point in the current path
This example uses the isPointInStroke()
method to check if a point is within the area of the current path's stroke.
HTML
<canvas id="canvas"></canvas>
<p>In stroke: <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.stroke(); result.innerText = ctx.isPointInStroke(50, 10);
Result
Checking a point in the specified path
Whenever you move the mouse, this example checks whether the cursor is in the stroke of an elliptical Path2D
path. If yes, the ellipse's stroke becomes green, otherwise it is red.
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Create ellipse
const ellipse = new Path2D();
ellipse.ellipse(150, 75, 40, 60, Math.PI * .25, 0, 2 * Math.PI);
ctx.lineWidth = 25;
ctx.strokeStyle = 'red';
ctx.fill(ellipse);
ctx.stroke(ellipse);
// Listen for mouse moves
canvas.addEventListener('mousemove', function(event) {
// Check whether point is inside ellipse's stroke
if (ctx.isPointInStroke(ellipse, event.offsetX, event.offsetY)) {
ctx.strokeStyle = 'green';
}
else {
ctx.strokeStyle = 'red';
}
// Draw ellipse
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fill(ellipse);
ctx.stroke(ellipse);
});
Result
Specifications
Specification | Status | Comment |
HTML Living StandardThe definition of 'CanvasRenderingContext2D.isPointInStroke' 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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
isPointInStroke
|
Chrome
Full support Yes |
Edge
Full support 79 |
Firefox Full support 20 Full support 20 No support 19 — 20 Prefixed' Implemented with the vendor prefix: moz |
IE
No support No |
Opera
Full support Yes |
Safari
Full support Yes |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android Full support 20 Full support 20 No support 19 — 20 Prefixed' Implemented with the vendor prefix: moz |
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 79 |
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
- Requires a vendor prefix or different name for use.'
- Requires a vendor prefix or different name for use.
See also
- The interface defining this method:
CanvasRenderingContext2D
CanvasRenderingContext2D.isPointInStroke() by Mozilla Contributors is licensed under CC-BY-SA 2.5.