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

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