The hexagon map is drawn one hexagon at a time. The center of the hexagon is located with a cartesian coordinate on the screen. The hexagon is drawn by calculating the 6 corners and drawing a line between them.

The hexagon grid will have a certain width and height. When the hexagon width is selected, the horizontal distance between adjacent hexes is equal to the width * 3/4.

The height of a hexagon will be equal to = sqrt(3)/2 * width and vertical distance between adjacent hexes is equal to the height.

In the panel below, adjust the hexagon width and height in pixels to draw a hexagon map. The hexagon size: (width, height) will display the hexagon size. The calculated size: (√3*width /2) will show the calculated height. Using the hexagon grid coordinate, each hexagon is draw by multiplying it with the distances between hexagon centers.