CanvasRenderingContext2D: beginPath() メソッド

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.beginPath() はキャンバス 2D API のメソッドで、サブパスのリストを空にすることにより新しいパスを開始します。新しいパスを作成したい場合は、このメソッドを呼び出してください。

メモ: 新しいサブパス（つまり、現在のキャンバスの状態に一致するサブパス）を作成する場合、 CanvasRenderingContext2D.moveTo() が使用できます。

構文

js
beginPath()

引数

なし。

返値

なし (undefined)。

例

独立したパスの作成

この例では、それぞれが 1 本の直線を含む 2 つのパスを作成します。

HTML

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

JavaScript

beginPath() メソッドがそれぞれの線を引く前に呼び出されるため、それぞれの線は別々な色で描かれます。

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

// 第 1 のパス
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();

// 第 2 のパス
ctx.beginPath();
ctx.strokeStyle = "green";
ctx.moveTo(20, 20);
ctx.lineTo(120, 120);
ctx.stroke();

結果

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報