Building an Isometric Real-Time Strategy (RTS) Engine on HTML5 Canvas

For anyone experimenting with browser-based game engines, I wanted to share some architecture notes on building a multi-city empire management game using an HTML5 Canvas and raw WebSockets.

Rendering an isometric grid efficiently requires splitting your drawing pipeline into distinct layers so you aren't redeterining cell coordinates on every animation frame:
1. Static Terrain Layer: Rendered once to an offscreen canvas buffer.
2. Entity/Unit Layer: Sorted dynamically using a Y-sort algorithm (painter's algorithm) based on the entity's world position.
3. UI/Overlay Layer: Handles selection boxes, pathfinding target vectors, and HUD elements.

For network synchronization, we use a lightweight state-delta packet structure over WebSockets rather than streaming raw frame positions, keeping bandwidth usage remarkably low even with dozens of active units moving simultaneously.

Has anyone tackled pathfinding (A*) optimization directly in TypeScript for browser grids? I'm curious if Web Workers are necessary once entity counts cross 500+ units.