---
name: "canvas-tilemap-renderer"
description: "Procedural terrain generation with tile rendering, camera panning, and minimap overlay. Advanced HTML5 Canvas tutorial."
compatibility: "Designed for claude-code, cursor, copilot"
metadata:
version: "1.0.0"
runtime:
language: "html"
entrypoint: "tilemap.html"
disable-model-invocation: true
---
# Canvas Tilemap Renderer
> **Difficulty:** Advanced | **Runtime:** HTML5 Canvas | **Output:** Interactive tilemap
Teach an AI agent to generate procedural terrain, render it as a colored tile grid, implement camera panning, and display a minimap overlay — all in a single HTML file.
## What You'll Build
A self-contained HTML file featuring:
- Procedural terrain generation using seeded random noise
- Tile rendering with distinct terrain types (grass, water, sand, trees, mountains)
- Arrow-key camera panning across a world larger than the viewport
- A minimap overlay showing the full map with a camera indicator
- Configurable world size and tile palette
## Core Concepts
### 1. Terrain Generation
Use a simple value-noise approach:
1. Create a 2D array of random values (seeded)
2. Smooth with neighbor averaging
3. Map value ranges to terrain types
| Value Range | Terrain | Color |
|------------|---------|-------|
| 0.00–0.30 | Water | `#2563eb` |
| 0.30–0.45 | Sand | `#eab308` |
| 0.45–0.65 | Grass | `#16a34a` |
| 0.65–0.80 | Trees | `#15803d` |
| 0.80–1.00 | Mountain | `#78716c` |
### 2. Camera System
The viewport shows a portion of the world:
```
camera = { x: 0, y: 0 }
visible_cols = floor(canvas.width / TILE_SIZE)
visible_rows = floor(canvas.height / TILE_SIZE)
```
Arrow keys shift the camera. Clamp to world bounds.
### 3. Minimap
A small (150x150) overlay in the corner:
- Draws each tile as a 1-2px dot
- Highlights the camera's current viewport as a white rectangle
- Updates every frame
### 4. Rendering Pipeline
Each frame:
1. Calculate visible tile range from camera position
2. Draw only visible tiles (culling)
3. Draw grid lines (optional)
4. Draw minimap overlay
5. Draw HUD (coordinates, terrain info)
## Instructions
1. Create the canvas and set up keyboard input
2. Generate the world map using seeded noise
3. Implement tile rendering with camera offset
4. Add arrow-key panning with bounds checking
5. Draw the minimap in the top-right corner
6. Display camera coordinates as HUD
## Parameters
| Parameter | Default | Description |
|-----------|---------|-------------|
| `WORLD_W` | 100 | World width in tiles |
| `WORLD_H` | 80 | World height in tiles |
| `TILE_SIZE` | 12 | Tile size in pixels |
| `SEED` | 42 | Random seed for terrain |
| `SMOOTH_PASSES` | 3 | Noise smoothing iterations |
---
## Files
### `tilemap.html`
```html
Canvas Tilemap Renderer
```
### `README.md`
```md
# Canvas Tilemap Renderer
A procedurally generated tilemap with camera panning and minimap overlay.
## Running
Open `tilemap.html` in any modern browser. Use arrow keys or WASD to pan the camera across the terrain.
## Terrain Types
| Color | Terrain |
|-------|---------|
| Blue | Water |
| Yellow | Sand |
| Green | Grass |
| Dark Green | Trees |
| Gray | Mountain |
## Customization
Edit the constants in the script:
- `WORLD_W` / `WORLD_H` — world dimensions in tiles
- `TILE_SIZE` — pixel size per tile
- `seed` — change for different terrain layouts
- `SMOOTH_PASSES` — more passes = smoother terrain
```