座標

canvasの大きさ

プログラムを理解する前にcanvasについて理解を深めます。canvasの大きさは前回プログラムでは17行目で定義しています。

widthで横サイズ、heightで縦サイズをピクセル値で設定しています。htmlのコードですね。このサイズ内にピクセル値の座標を指定し描画することになります。

座標の起点

描画する際にはピクセル値を横、縦の座標で指定しますがこの座標は混乱する部分があります。それは起点の(0,0)が左上にあることです。折れ線グラフなどは左下が起点なので勘違いしやすいところです。