CanvasRenderingContext2D: stroke() メソッド

Baseline 広く利用可能

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

CanvasRenderingContext2D.stroke() はキャンバス 2D API のメソッドで、現在のあるいは渡されたパスを、現在の線のスタイルで描画します。

線はパスの中央に配置されます。言い換えれば、線の半分は内側に、半分は外側に描かれます。

線は非ゼロワインディングルールを使用して描かれます。すなわち交差したパスは塗りつぶされます。

構文

stroke()
stroke(path)

引数

path: 描画する Path2D パス。

返値

なし (undefined)。

例

単純な線の矩形

この例では、 rect() メソッドを用いて矩形を作成し、 stroke() を用いてキャンバスに描画しています。

HTML

html

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

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.rect(10, 10, 150, 100);
ctx.stroke();

結果

パスの再描画

通常、新しく描画するごとに beginPath() を呼び出したくなるはずです。そうしないと、以前のサブパスが現在のパスの一部として残り、 stroke() メソッドを呼び出すたびに描画されることになります。しかし、場合によっては、これは望ましい効果かもしれません。

HTML

html

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

JavaScript

このコードは、 1 つ目のパスを 3 回、 2 つ目のパスを 2 回、 3 つ目のパスを 1 回だけ描画します。

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

// 1 つ目のサブパス
ctx.lineWidth = 26;
ctx.strokeStyle = "orange";
ctx.moveTo(20, 20);
ctx.lineTo(160, 20);
ctx.stroke();

// 2 つ目のサブパス
ctx.lineWidth = 14;
ctx.strokeStyle = "green";
ctx.moveTo(20, 80);
ctx.lineTo(220, 80);
ctx.stroke();

// 3 つ目のサブパス
ctx.lineWidth = 4;
ctx.strokeStyle = "pink";
ctx.moveTo(20, 140);
ctx.lineTo(280, 140);
ctx.stroke();

結果

線の描画と塗りつぶし

パスの描画と塗りつぶしの両方を行う場合、これらの操作を行う順序によって結果が決まります。この例では、左側の正方形は、描画が塗りつぶしよりも上になるように描かれています。右側の四角は、ストロークよりも塗りつぶしが上に来るように描かれています。

HTML

html

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

JavaScript

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

ctx.lineWidth = 16;
ctx.strokeStyle = "red";

// 塗りつぶしの上にストローク
ctx.beginPath();
ctx.rect(25, 25, 100, 100);
ctx.fill();
ctx.stroke();

// ストロークの上に塗りつぶし
ctx.beginPath();
ctx.rect(175, 25, 100, 100);
ctx.stroke();
ctx.fill();

結果

仕様書

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

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

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

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