I am drawing a hexagonal grid using javascript and svg. The grid needs to have a fixed width (let’s say, of 1000px). The dimensions of the grid can differ, but I have that information (the columns and rows). I have written a function that given a hexagons ‘bounding box’ width (the height is a factor `0.8660254`

of the width), will calculate all 6 points and draw a polygon between them. I am staggering the `x`

coordinate such that the polygons neatly connect.

However, the part I am stuck on currently is: How do I figure out the width of the polygons such that they take up the most available space on the canvas? I cannot simply do `width of the canvas / number of columns`

because that doesn’t take into account the staggering (see the image below)

How can I figure out how to stretch the hexagons such that they all fit and take up as much space as they can?

## Advertisement

## Answer

If you have `C`

columns and hexagon side size (unknown yet) is `x`

, we can write inequality:

x/2 + C*x*3/2 <= width x*(1+3*C)>=2*width x <= 2*width / (1+3*C)

So calculate the right part and get floored integer (if you need integer side)

For height with `R`

rows:

x*sqrt(3)/2 + R*x*sqrt(3)/2 <= height x <= 2*height / (sqrt(3) + R*sqrt(3))

Get min value from calculated sizes to fit both width and height