W3cubDocs

/Web APIs

CanvasRenderingContext2D: isPointInStroke() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨January 2020⁩.

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

isPointInStroke(x, y)
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

A boolean value

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

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 * 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);
});

Result

Specifications

Specification
HTML>
# dom-context-2d-ispointinstroke-dev>

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS
isPointInStroke 26 79 19 15 7 26 19 14 7 1.5 4.4 7
path_parameter 36 79 31 23 7 36 31 24 7 3.0 37 7

See also

© 2005–2025 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