線と円

塗りつぶし以外も、同じ c で描ける。輪郭だけ引く strokeRect、範囲を消す clearRect、それに線と円。

strokeRect は中を塗らず輪郭だけ引く。線の色は strokeStyle、太さは lineWidth で決める。

lineWidth を 6 から 16 にすると、線が太くなる。

同じ四角に fillRect と strokeRect を重ねれば、塗りと枠の両方が乗る。

clearRect は色を塗らず、その範囲を透明に戻す。塗った四角の真ん中を消すと、下の白が出る。

線

線は道を決めてから引く。beginPath で始め、moveTo で始点、lineTo で行き先を指して、stroke でなぞる。

円

円は arc に中心・半径・角度の範囲を渡す。0 から Math.PI * 2 で一周。中心は c.canvas.width / 2。fill で内側を塗る。

範囲を Math.PI * 2 から Math.PI にすると、半周ぶんの半円になる。