Canvas Tricks

I work on a 4X-style game called Not My Territory (Yet) as a hobby. There are opposing teams with colors attributed to them. They own territory, and therefore have borders.

However, making borders look good on the map was always a bit of a challenge.

I wanted them to feel old-school.

I didn’t want them to look geometrical.

And I needed them to be discrete, so as not to obstruct the view.

Another example

First, the shape was blocky, because it is the easiest thing to do with hexes:

Block shape

Then I smoothed it out with splines, but even that was too regular.

Splined shape

I added irregularities, which was tricky, since a small change in the border (say, a tile added to it) must not change the shape of the rest of the border.

Irregular shapes

I used the algorithm to generate irregularities to draw how far a unit can move in one turn, as well.


Move distance


Move distance with irregularities

(Out of curiosity, here’s what the un-splined version looks like, the irregularities are very apparent: I nudge one vertex out of two.)

Shape with random irregularities but no splines

Next, the border color. After a Reddit poll where I presented fairly different options, I settled on this:

Border color appearance

The tricky bit, this time, is to ensure that borders don’t overlap when two nations are right next to each other. To achieve this result, I use canvas clipping, drawing only the inside of the border, after having drawn a full border for each opposing camp. Chrome pixelates the edge of clipped painted data, probably because of its Path implementation, but that’s the best solution I found.

Also, yet again, I ensured that dashed borders didn’t change with a small change in the border.


Dashed border before single cell addition

Dashed border after single cell addition


Dashed border before single cell addition

Dashed border after single cell addition; most of the border stayed pixel-identical

That was done by putting a dash one out of two consecutive hexagonal edge along the border.

What next? I found the map’s shoreline (and all terrain transitions) too harsh and geometric as well.

Shoreline with blunt transition from grass to water

I tried to use the same trick as before, irregular splines, but it doesn’t work this time.

Smooth shoreline with blunt transition

I accidentally found out that making my sprite images square gave a surprisingly good random shoreline.

Irregular shoreline with blunt transition, made from random rotations of the
square sprite images

I added some noisy irregularities to the sprite sheet.

Irregular shoreline with noisy transition

I added a beach tile in the sprites, and the result is a lot better!

Shoreline with beach to transition from grass to water


Before all shoreline changes


After all shoreline changes

Finally, while it was cool to have a map the size of a cosmic superbubble, having a game where your enemy can infinitely escape isn’t fun. I enclose each new map in a random continent the size of Corsica.

Map of a large island from high above

Did I say “finally”? This is the last item! I improved the look of the map when unzoomed.


Zoomed out map of the island with strange color choices and pixelated hexagonal cells

More recently:

Zoomed out smooth island with strange color choices


Zoomed out smooth island with plausible color choices

Bonus picture, 3D rendering, a fair bit of work with many challenges to come:

Shoreline with mountains casting shadows