CanvasRenderingContext2D.closePath()

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

このメソッドは canvas に直接は何も描きません。 stroke() または fill() メソッドを使用してパスを描くことができます。

構文

void ctx.closePath();

三角形を閉じる

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

HTML

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

JavaScript

The triangle's corners are at (20, 150), (120, 20), and (220, 150).

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

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

JavaScript

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

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

結果

仕様書

仕様書 状態 備考
HTML Living Standard
CanvasRenderingContext2D.closePath の定義
現行の標準

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
closePathChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報