I'm programming a little web strategy game. In the country map I pretend to display each country with a national color. The issue is how to render the borders in a simple and efficient way. Right now I'm planning to set a field to each tile called "border" with values from 0 to 8. The algorithm would check for EVERY tile is its adjacent has a different "owner". If the tile is inside the territory, the border value would be 0, because would not have adjacent any tile with different owner, if not, would vary between 1 (north) clockwise to 9 (north-west) and then draw the border.

I find this simple but too processor-intensive. Are there any other "pro" choices to render territories borders?


2 Answers 2


I'm programming a little web strategy game.

Computing which edges to draw where and storing that info rather than finding out during drawing by looking at neighbouring cells is a good strategy.

Remember, a cell can likely have borders on many sides, so use bitwise operators to store all the adjacency information in a single integer.

I find this simple but too processor-intensive.

What are you using? HTML tables? A canvas?

If HTML5 canvas, the key is to use fillRect instead of paths for the edges.

Finally, ensure you are doing partial updates - drawing only those cells that have changed ownership or other state, and those adjacent to them, rather than redrawing the whole map for each update.

  • \$\begingroup\$ Yes, i'm using Canvas. Basically you approve my strategy, so my thoughts are in a good direction for what i see. Regarding drawing only the modified part, i think there is no other way but to redraw the entire canvas (which in my interface i'm using several layers). Thanks! \$\endgroup\$
    – Gabriel
    Mar 10, 2011 at 1:06
  • \$\begingroup\$ @gabriel-a-zorrilla you can do partial updates using getImageData() and then putImageData() later to restore it whatwg.org/specs/web-apps/current-work/multipage/… \$\endgroup\$
    – Will
    Mar 10, 2011 at 9:28

In your map, why not just have an attribute on each tile indicating if it is a border (and if so, what edge and what color)? The benefit is that it will use less processor cycles, the drawback is that you must know at design time where the borders are.

Unless you are procedurally generating your maps, this should be an easy thing to setup. Even if you are generating the map procedurally, you only need to run the processor intensive step of calculating borders one time, at design time, not every frame.

If knowing at design time is not an option, you could similarly add the attributes to your tiles; and only calculate them once, upon loading the map data. That doesn't resolve the processor intensive task, but it does keep it to a minimum.

In terms of the algorithm you are using, there may be more optimized way to do it, but if you can avoid making those optimizations by moving when/where the algorithm is run, I'd do that first.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .