Map Maker: A Canvas Based Web Component
I created a new tool called Map Maker. This uses Canvas API to create a hexagonal grid of a given size. The math involved in labeling and then position each intersection is quite interesting, and I am considering doing a blog post on the math involved at some point. The equation for the distance between two points is used to create a hover effect. When the user clicks while hovering over a point, that point is updated to match the mouse position until they let up on the mouse, creating a drag and drop effect. I plan on using this to build a map for a board game by importing the data created with this Map Maker tool into a Photoshop script.
This uses the Canvas API wrapped in a Web Component. This makes this tool capable of being dropped into any website with a few lines of html. Additionally, all the properties of the hexagonal grid can be controlled through the web components attributes.
<cpg-map-maker side-length="50" grid-size="3" dot-size="5" hover-dot-size="5" drag-dot-size="5" line-thickness="4" corner-rgba="rgba(0,0,0,1)" side-rgba="rgba(0,0,0,1)" hover-rgba="rgba(0,150,0,1)" drag-rgba="rgba(0,200,0,1)" show-origin="false"> </cpg-map-maker>
And you will need to import the web component:
import { CpgMapMaker } from 'canvas-play';
You can always check out the rest of Canvas Play for more canvas based web components. These components can be installed as shown below
npm install canvas-play