Canvas2d Isometric Renderer

Canvas2D Isometric Renderer

Overview

This skill builds the core render loop: draw ground tiles back-to-front, then depth-sorted objects, using the grid math transform and the atlas. It is the backbone every gameplay skill plugs into.

When to Use

• You need to actually draw the isometric world.
• Tiles or sprites render in the wrong order.
• You are wiring grid math + atlas into a render loop.

Process

1. Use isometric-grid-math for all coordinate conversions.
2. Draw ground tiles in back-to-front order (by row+col).
3. Draw objects/characters AFTER tiles, sorted by depth (see depth-sorting-occlusion).
4. Source every image from the atlas (see spritesheet-atlas-packing).
5. Apply the camera transform once per frame (see camera-pan-zoom-controls).
6. Only draw tiles within the visible viewport (culling).
7. Keep the draw loop pure - no allocations per frame.

for (const tile of tilesInView) drawTile(tile);
for (const obj of sortByDepth(objectsInView)) drawSprite(obj);

Rationalizations (Stop Lying to Yourself)

| Excuse | Reality | |---|---| | "I will draw everything every frame" | Drawing off-screen tiles wastes the frame budget. Cull. | | "Order does not matter much" | Wrong order = objects behind walls. Sort every frame. |

Red Flags - STOP if you catch yourself:

• Drawing the entire map instead of the viewport.
• Allocating arrays/objects inside the draw loop.
• No separation between tile pass and object pass.

Verification

You are NOT done until every box is checked:

• [ ] Ground tiles draw back-to-front correctly.
• [ ] Objects draw after tiles in depth order.
• [ ] Only visible tiles are drawn (culling works).

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: 0xheycat
• Source: 0xheycat/isometric-game-skills
• License: MIT
• Homepage: https://0xheycat.github.io/isometric-game-skills/demo/

Install and usage instructions live in the source repository linked above.