хорошо, вот какое-то решение:
назначьте каждой стране свой цвет на карте (не назначайте специальные цвета границам, границы должны быть окрашены в любой из цветов стран).
загрузить это изображение на холст
var img = new Image();
img.src = 'worldmap.png';
var map = document.getElementById('canvas').getContext('2d');
map.drawImage(img, 0, 0);
после этого вы можете отобразить вашу карту нормалей над этой картой (это только ссылка, и ее можно скрыть под другими вещами - используйте для этого divs и z-index).
чтобы определить, в какой стране игрок просто получает пиксельные данные на своей позиции
data = map.getImageData(x, y, 1, 1).data;
key = data.join("-"); // something like "255-0-0-255" for red
country = countries[key];
это должен быть массив rgba, вы можете посмотреть, какой стране присвоен этот цвет.
поэтому вам нужно будет сохранить массив с внедренными значениями rgba в качестве ключа и названиями стран в качестве значения.
countries = {
"255-0-0-255" : "Russia",
"255-0-255-255" : "China",
...
};
это работает только в браузерах, в которых есть объект canvas. так что если вы делаете это на iPhone или Android, вам повезло!