構文

context . beginPath()

現在のパスをリセットします。

仕様

コンテキストには必ず現在のパスがあります。現在のパスは 1 つしかなく、描画状態の一部ではありません。

パスは、0 個以上のサブパスのリストを持ちます。それぞれのサブパスは、1 つ以上の地点のリストから構成され、直線や曲線で接続されます。そして、サブパスが閉じられているか否かを表すフラグから構成されます。閉じられたサブパスとは、サブパスの終点がサブパスの始点に直線で接続されたものです。サブパスに 2 つ以上の地点がないと、パスを描画する際に無視されます。

原文：http://www.w3.org/TR/2010/WD-2dcontext-20100624/#complex-shapes-paths

サンプル

このサンプルでは、まず、三角形を描くサブパスを2つ作り、それらを描画します。その後、beginPath() メソッドでパスを初期化し、今度は直線を描くサブパスをひとつ作り、それを描画します。

/* -------------------------------------
* パスを新たに作る
* ----------------------------------- */
/* パスを初期化 */
ctx.beginPath();
/* 一つめのサブパス */
ctx.moveTo(30, 10);
ctx.lineTo(45, 50);
ctx.lineTo( 5, 50);
ctx.closePath();
/* 二つ目のサブパス */
ctx.moveTo(70, 10);
ctx.lineTo(95, 50);
ctx.lineTo(55, 50);
ctx.closePath();
/* これまで描いたパスを表示 */
ctx.stroke();
/* -------------------------------------
* パスを新たに作る
* ----------------------------------- */
/* パスを初期化 */
ctx.beginPath();
/* 一つめのサブパス */
ctx.moveTo(30, 80);
ctx.lineTo(70, 80);
/* これまで描いたパスを表示 */
ctx.stroke();

[beginPath() メソッドの実際のサンプル]

ブラウザ対応状況