CanvasRenderingContext2D.stroke()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

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

構文

js
void ctx.stroke();
void ctx.stroke(path);

引数

path

描画する Path2D パス。

例

単純な線の矩形

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

HTML

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

JavaScript

js
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 回だけ描画します。

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

// First sub-path
ctx.lineWidth = 26;
ctx.strokeStyle = "orange";
ctx.moveTo(20, 20);
ctx.lineTo(160, 20);
ctx.stroke();

// Second sub-path
ctx.lineWidth = 14;
ctx.strokeStyle = "green";
ctx.moveTo(20, 80);
ctx.lineTo(220, 80);
ctx.stroke();

// Third sub-path
ctx.lineWidth = 4;
ctx.strokeStyle = "pink";
ctx.moveTo(20, 140);
ctx.lineTo(280, 140);
ctx.stroke();

結果

線の描画と塗りつぶし

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

HTML

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

JavaScript

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

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

// Stroke on top of fill
ctx.beginPath();
ctx.rect(25, 25, 100, 100);
ctx.fill();
ctx.stroke();

// Fill on top of stroke
ctx.beginPath();
ctx.rect(175, 25, 100, 100);
ctx.stroke();
ctx.fill();

結果

仕様書

Specification
HTML Standard
# dom-context-2d-stroke-dev

ブラウザーの互換性

BCD tables only load in the browser

関連情報