まず四角を塗る
c.fillRect(x, y, w, h) は左上 (x, y) から幅 w・高さ h の四角を塗る。塗る色は呼ぶ前に c.fillStyle で決める。
格子に区切って、左から右へ少しずつ明るい四角を並べる。tint に渡す値を 0 から 255 まで動かすと、暗から明のランプがそのまま帯になる。下の段には arc で円を並べて、四角と円を同じ格子に置いている。
fillRect は呼んだ瞬間に塗る。arc は違って、beginPath で辺を溜め始めて fill で初めて塗る。即時で塗るものと、いったん溜めてから塗るものが、同じ ctx に混在する。n を上げると四角と円が細かく刻まれ、ランプの段が増える。
ctx は状態機械として振る舞う。fillStyle や lineWidth のような設定は一度セットすると、次に変えるまで残りつづける。色を決めてから塗る、の順番になる。fillRect は即時の塗り、arc / lineTo のようなパス系は内部のパスバッファに辺を足していくだけで、fill か stroke を呼ぶまで画面には出ない。beginPath はそのバッファを空にする合図。
サイズは c.canvas.width / height から取る。固定の数字を書かないと、プレビューの幅が変わっても格子が画面の端まで届く。正方形を前提にしたいときは Math.min(w, h) を使うと、横長でも縦長でも余白の出方が揃う。