TLDR; if you use ctx.save(), remember to restore!
It all started on a typical day, tucked away in the dark cave that is my abode. Developing my next project with JS & canvas, I came across an unusual issue that would only appear after some time.
My rendering logic, typically rendering on-demand at 60fps, crept to a halt. But why, poor V8, are you experiencing such trauma? V8 was a such good engine for so long, and I've created many canvas apps and never experienced this.
Despite showcasing it's stress, V8 was compliant with providing very capable performance debugging tools and eventually showed me the whey. What I saw, friends, was this very ominous debug profile:
That save call? Fine. Lack of a ctx.restore() after it? Huge mistake! Without digging into documentation, I can only assume that V8 accumulates a stack of save states for CanvasRenderingContext2D that are only released once restored, or until a certain threshold is met.
Lesson learnt!
Top comments (1)
Great read looking forward to the next one! 💪