Optimizing Canvas 2D render loops for turn-based board games (dirty rectangles vs full canvas redraw)

[payamprivate]

Hi everyone,

I'm working on a 2D web-based board game (traditional tabletop grid/board mechanics with checker pieces moving across points). Because it's turn-based rather than an action game, 95% of the time the screen is completely static, with bursts of 60 FPS animation only during piece drags, dice rolls, or checker slide animations.

I'm debating between two architectural approaches for the rendering layer on HTML5 Canvas:

1. A classic continuous requestAnimationFrame loop that clears and redraws all layers (background board wood grain, pieces, UI overlays) every frame, but only when an isAnimating or isInteracting dirty flag is true, otherwise halting RAF until the next input/state event.
2. A layered canvas approach: one static background canvas for the heavy textured board surface, and an overlay canvas on top that only re-renders moving pieces, using dirty clipping rectangles (ctx.clearRect(x, y, w, h)) during piece movements.

For modern mobile browsers (especially Safari on iOS where canvas memory footprints and battery consumption can be sensitive):

• Has the layered multi-canvas approach yielded measurable battery / CPU benefits in your experience compared to just a single canvas with conditional RAF?
• Are dirty rect clearing optimizations still worth the mathematical bookkeeping overhead given how fast modern 2D canvas 2D contexts are on hardware-accelerated mobile devices?

Would appreciate any insights or benchmarks from folks who have built turn-based or grid games for mobile web!