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 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 11.6Safari 完全対応 2WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 12Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報