結論
図形を描画する前にcontext.beginPath()しましょう。
終わり。
おまけ
Canvasに1/60秒間隔で描画処理をしていたのだが、4分くらいたつとFPSが低下する現象が発生した。
全く原因が分からず
-
setIntervalをrequestAnimationFrameに変えても効果なし - キャンバスの最適化に従っても効果なし
- メモリの解放忘れでもなさそう
- ググっても全く参考になるサイトが見つからない
という状態で絶望していた。
そんな中、ソースの原因箇所を特定すべく描画処理を消しまくってcontext.rect()が原因だということに気づき、やがてbeginPath()で解決できることが分かった。
「まあほぼ画像関係が原因だろうな。」と思い込んでいたこと、再現まで時間がかかることから長い間デバグ沼にハマってしまった。
ついでにChatGPTくんに聞いてみた。
全く知らんかった。。。