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, otherwise `false`.

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);
```

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
// 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);
});
```

Specifications

Specification Status Comment
HTML Living Standard
The definition of 'CanvasRenderingContext2D.isPointInStroke' in that specification.
Living Standard

Browser compatibility

Update compatibility data on GitHub
Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Chrome Full support Yes Edge Full support 79 Firefox Full support 20 Full support 20 No support 19 — 20Prefixed 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 — 20Prefixed Prefixed Implemented with the vendor prefix: moz Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes 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.