Direct Hex Test

Direct Hex Test

Multi-scale hex overlay visual regression test

written by
In Search of an Image - "No Image Associated with this article": an image by

Direct Hex Test

Standalone test page for the multi-scale hex overlay canvas (pan/zoom + legend).

PROTOTYPE webapp Updated August 7, 2025
Direct Hex Test hero image

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

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

Screenshots