CanvasRenderingContext2D: isPointInStroke() メソッド

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年1月以降、すべてのブラウザーで利用可能です。

CanvasRenderingContext2D.isPointInStroke() はキャンバス 2D API のメソッドで、指定された点がパスのストロークで囲まれた領域内にあるかどうかを報告します。

構文

isPointInStroke(x, y)
isPointInStroke(path, x, y)

引数

x: 検査する点の X 座標です。
y: 検査する点の Y 座標です。
path: 検査対象となる Path2D パスです。指定されなかった場合は、現在のパスが使用されます。

返値

論理値で、点がパスのストロークに囲まれた領域内にある場合は true、そうでなければ false を返します。

例

現在のパスの中の点を検査

この例では、isPointInStroke() メソッドを使用して、点が現在のパスのストローク領域内にあるかどうかを調べます。

HTML

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

結果

点が指定されたパスの中にあるかどうかを検査

マウスが移動されるたびに、この例ではカーソルが楕円形の Path2D パスのストローク内にあるかどうかを調べます。ある場合、楕円のストロークは緑色に、そうでない場合は赤色になります。

HTML

html

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 楕円を作成
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);

// マウスの移動を待ち受け
canvas.addEventListener("mousemove", (event) => {
  // その位置が楕円のストロークの中にあるかどうかを検査
  const isPointInStroke = ctx.isPointInStroke(
    ellipse,
    event.offsetX,
    event.offsetY,
  );
  ctx.strokeStyle = isPointInStroke ? "green" : "red";

  // 楕円を描画
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fill(ellipse);
  ctx.stroke(ellipse);
});

結果

仕様書

仕様書
HTML # dom-context-2d-ispointinstroke-dev

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年2月11日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告