CanvasRenderingContext2D: closePath() メソッド

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.closePath() はキャンバス 2D API のメソッドで、現在の点から現在のサブパスの開始点までの間に直線を追加することを試みます。図形がすでに閉じていたり、 1 つしか点がなかったりした場合は、この関数は何もしません。

このメソッドはキャンバスには直接は何も描きません。 stroke() または fill() メソッドを使用してそのパスを描画することができます。

構文

js
closePath()

引数

なし。

返値

なし (undefined)。

例

三角形を閉じる

この例は最初に三角形の2つの (対角の) 辺を lineTo() メソッドを使用して作成します。その後で、図形の最初と最後の点を自動的に接続する closePath() メソッドで、底辺を作成します。

HTML

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

JavaScript

三角形の頂点は、 (20, 140), (120, 10), (220, 140) とします。

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

ctx.beginPath();
ctx.moveTo(20, 140); // ペンを左下の隅へ移動
ctx.lineTo(120, 10); // 上中央へ線を引く
ctx.lineTo(220, 140); // 右下の隅へ線を引く
ctx.closePath(); // 左下の隅へ線を引く
ctx.stroke();

結果

サブパスを 1 つだけ閉じる

この例では、非接続のサブパス 3 つからなるスマイリーの顔マークを描画します。

メモ: すべての弧について、作成された後で closePath() が呼び出されていますが、最後の弧（サブパス）のみが閉じられます。

HTML

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

JavaScript

最初の 2 つの弧は顔の目を作成します。最後の弧は口を作成します。

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

ctx.beginPath();
ctx.arc(240, 20, 40, 0, Math.PI);
ctx.moveTo(100, 20);
ctx.arc(60, 20, 40, 0, Math.PI);
ctx.moveTo(215, 80);
ctx.arc(150, 80, 65, 0, Math.PI);
ctx.closePath();
ctx.lineWidth = 6;
ctx.stroke();

結果

仕様書

Specification
HTML
# dom-context-2d-closepath-dev

ブラウザーの互換性

BCD tables only load in the browser

関連情報