context.beginPath();　の考え方

Canvasには四角形を描くメソッドしかない。

それ以外の図形を描くためには、『パス』を使う。

パスは、図形の形だけに関するデータをまとめて扱うための機能。

context.beginPath();

beginPathを実行して、パスの作成を始める。

以降、パスに図形が追加できる。

context.fill();
context.stroke();

パスを作成したら、描画のためのメソッドを呼び出す。

fillは図形をすべて塗りつぶし、strokeは図形の輪郭線を描画する。

つまりは、context.beginPath();で新しく図形のパスを追加しない限り、後から記述した図形のパスは、初めに書いた図形のパスと一つと見なされてしまう。

色を変えたかったり、塗りつぶしと、輪郭線を変えたいときは、一度、context.beginPath();を挟んで、記述しなければいけない。