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.
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.
js
isPointInStroke(x, y) isPointInStroke(path, x, y)
A Boolean, which is true
if the point is inside the area contained by the stroking of a path, otherwise false
.
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>
js
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);
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>
js
const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); // Create ellipse const ellipse = new Path2D(); ellipse.ellipse(150, 75, 40, 60, Math.PI * 0.25, 0, 2 * Math.PI); ctx.lineWidth = 25; ctx.strokeStyle = "red"; ctx.fill(ellipse); ctx.stroke(ellipse); // Listen for mouse moves canvas.addEventListener("mousemove", (event) => { // Check whether point is inside ellipse's stroke const isPointInStroke = ctx.isPointInStroke( ellipse, event.offsetX, event.offsetY, ); ctx.strokeStyle = isPointInStroke ? "green" : "red"; // Draw ellipse ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fill(ellipse); ctx.stroke(ellipse); });
Specification |
---|
HTML Standard # dom-context-2d-ispointinstroke-dev |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
isPointInStroke |
26 | 79 | 19 | No | 15 | 7 | 4.4 | 26 | 19 | 14 | 7 | 1.5 |
path_parameter |
36 | 79 | 31 | No | 23 | 7 | 37 | 36 | 31 | 24 | 7 | 3.0 |
CanvasRenderingContext2D
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInStroke