CanvasRenderingContext2D.beginPath()

Canvas 2D API のCanvasRenderingContext2D.beginPath() メソッドは、サブパスのリストを空にすることにより新しいパスを開始します。新しいパスを作成したい場合、このメソッドを呼び出してください。

void ctx.beginPath();

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

HTML

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

JavaScript

beginPath() メソッドはそれぞれの線についての処理開始前に呼ばれるため、各線は別々の色で描かれるでしょう。

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

実行結果

• このメソッドを定義しているインターフェース: CanvasRenderingContext2D
• CanvasRenderingContext2D.closePath()