# Canvas2d Isometric Renderer

> Use when building a Canvas 2D renderer that draws an isometric tilemap and sprites efficiently with correct ordering.

- Skill: `0xheycat/canvas2d-isometric-renderer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add 0xheycat/canvas2d-isometric-renderer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/0xheycat/canvas2d-isometric-renderer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT
- Author: 0xheycat (https://skillmd.com/u/0xheycat)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/0xheycat/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.

```js
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).