間違いだらけのピアノイラスト　ピアノの鍵盤を計算で描くプログラム　(JavaScript)

身の回りの本などに描かれたピアノの鍵盤のイラスト、ほとんどが間違っているようです。ピアノを題材にした漫画アニメ、ピアノ教則本でさえ！
イラストなのでピアノと分かればいいのですが、正確なピアノの鍵盤を描画するプログラム（JavaScript）を作ってみました。

ピアノの鍵盤イラスト

普通はこんなイメージ？

よく見るピアノイラスト - 思い込み
※イラストはイメージです

ほとんどの人が鍵盤のイラストを描くとこうなると思います。これでもいいのですが、気になります。

等分割　プログラム失敗例

プログラム失敗例　等分割　白鍵1/7　黒鍵1/12

なんかずれてる。単純に1オクターブを白鍵7等分、黒鍵12等分の幅ではないようです。

ほぼ正確なピアノ鍵盤

ほぼ正確なピアノ鍵盤

使っているの電子ピアノ（KORG）の鍵盤とほぼ同じになりました。他のピアノの鍵盤も同じはずです。ほぼ⇒白鍵の幅が違います。実物は、白鍵の幅が同じ、クリアランスで調整しているようです（メーカーによって違うかも）。

鍵盤の描き方（1オクターブ）

1オクターブを12分割、これが黒鍵の幅になります。
12分割したものを、左5つと右７つにグループ分け
左5つの幅を3等分　ドレミの白鍵　5/36 < 1/7
右7つの幅と4等分　ファソラシの白鍵　7/48 > 1/7
黒鍵は高さの白鍵の約2/3
12等分した2,4,7,9,11番目に黒鍵

プログラム　JavaScript

ピアノの鍵盤を計算で描くプログラム

上記の画像を生成したプログラムです。
実行するにはローカルHTTPサーバー（アプリ）とWebブラウザが必要です。
有料記事の内容は
ファイル3つ
index.html  index.css main.js
のソースコード
とファイル3つをまとめたZipファイル（ダウンロード）
です。
ソースコードの再配布禁止、利用は自己責任でお願いします。
Windows10/11のEdge、Chromeで動作確認しています。

プログラム

ソースコード

 main.js
JavaScriptのソースコードです。
drawKeyboard()　正しい鍵盤
drawKeyboardIllust()　よくあるイラスト
drawKeyboardBadProgram()　プログラム失敗作