Direct Hex Test
Standalone test page for the multi-scale hex overlay canvas (pan/zoom + legend).
PROTOTYPE
webapp
Updated August 7, 2025
What it does
This page is a direct / standalone test harness for the multi-scale hex
overlay (/js/hex-multi-scale.js + /js/hex.js). It exists so you can quickly
validate pan/zoom behavior, canvas sizing, and legend rendering without the
surrounding post layout.
How to use it
- Open the test page: /tools/hex-test-direct.html
- Pan: drag on the canvas
- Zoom: mouse wheel / trackpad scroll, pinch (touch), or
+/-buttons - Reset: use the
⟳button
Notes
- Primary writeup / context: Practical Hexcrawl Design and Procedures
- There’s also a more formal visual verification page at
/tests/hex-multi-scale-test.html.
Details
Tech
- JavaScript
- HTML
- Canvas
- Bootstrap
License
MIT
Tags
rpg
hexcrawl
javascript
canvas
visualization
testing
Features
- Renders 36/6/1-mile layered hex grids on one canvas
- Pan + wheel/pinch zoom controls with reset
- Intended for verifying layout sizing and rendering fixes