Skip to main content



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-

Latest Posts

Drawing a City with Illustrator

Drawing a City with Pens and Markers

Making a Starship Icon in Illustrator

Introducing Whipo: Whip Up Web Apps

Making a Board Game Map: Adding Farms and Fields

Making a Map For a Board Game

Using Photoshop to Soften Color Pencil Portraits

Drawing Trees and Lots of Them

Drawing My Wife with Colored Pencils

Color Pencil: Women's Face