# 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 |