iPhoneのSafariだけ `canvas` が表示できなかった

開発中のWebサイトをiPhoneのSafariで確認したところ、 canvas の部分が正常に表示されていませんでした。

WindowsやMacのブラウザでは正常に表示されます。

実機デバッグで確認したところ、コンソールに以下のエラーが表示されていました。

Canvas area exceeds the maximum limit (width * height > 16777216).

Canvasの面積が最大限度を超えているようです。

ちなみに、MacとiPhoneを接続すれば、iPhoneのSafariのコンソールを見ることができます。
詳細は以下の記事にまとめました。
iPhoneのSafariで表示しているページをMacのSafariでデバッグする

`canvas` の面積が広すぎて表示できなかった。

PCのブラウザで canvas の面積を計算したところ、

であり、 width * height = 17,478,560‬ となり、見事に 16,777,216 をオーバーしていましたw

スクロールする前提で、広い canvas を用意していたのですが、そういった使い方はダメだったようです。

width, heightの値を小さくしたところ、ちゃんとiPhoneのSafariでも表示されました。

何事にも限度というものがありますね！