Canvas performance optimization
Skill 0xheycat/isometric-game-skills/skills/canvas-performance-optimization
Use when an isometric Canvas game drops frames, to cut draw calls and allocations and hold a steady 60fps.From its SKILL.md
npx -y skills add 0xheycat/isometric-game-skills --skill canvas-performance-optimizationAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 6 stars6 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its file declares
Copied from the file, not written here
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
1.7 KB, 360 tokens by cl100k_base, as published. Nobody here has run it
Canvas Performance Optimization
Overview
Isometric games die by a thousand draw calls. This skill profiles the frame, culls off-screen tiles, batches from the atlas, and removes per-frame allocations to hit a stable 60fps.
When to Use
- Frame rate drops or stutters.
- Large maps lag when panning.
- You suspect GC pauses or overdraw.
Process
- Profile first - measure where the frame time actually goes.
- Cull: only draw tiles/objects inside the viewport.
- Batch draws from one atlas to minimize texture binds.
- Cache static layers (ground) to an offscreen canvas; redraw only when it changes.
- Eliminate per-frame allocations (reuse arrays/objects).
- Avoid sub-pixel blits; snap to integer pixels.
- Re-profile to confirm the fix, do not assume.
Profile -> Cull -> Batch -> Cache static layer -> Kill allocations -> Re-profile
Rationalizations (Stop Lying to Yourself)
| Excuse | Reality |
|---|---|
| "I know what is slow without profiling" | Guessing wastes hours on the wrong thing. Profile first. |
| "Redrawing the ground every frame is fine" | Static ground should be cached. Redraw only on change. |
Red Flags - STOP if you catch yourself:
- Optimizing before profiling.
- Redrawing static layers every frame.
- Allocating inside the render loop.
Verification
You are NOT done until every box is checked:
- Frame time was profiled before and after.
- Off-screen content is culled and static layers cached.
- No allocations occur inside the render loop; 60fps holds.
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.