[Arhitector]

я так полагаю делаете используя обычные html элементы?

Нет, вся отрисовка на хостле canvas.
В принципе я немного продвинулся по этому направлению, написал для персонажа функцию нахождения дистанции объекта относительно персонажа и установил переменную с радиусом света, если дистанция больше, тогда поверх фона отрисовываю новый слой rgba(0,0,0,0.8) если же радиус меньше то добавляю легкое затемнение, вроде работает

var map = location.getMap("bg");

for (var i = 0 ; i < map.length; i++) {
    for (var j = 0; j < map[i].length; j++) {
        var x = (j * cellSize) + offset_map.x, y = (i * cellSize) + offset_map.y;
        
        if(character.getDistanseTo({x: x + (cellSize / 2), y: y + (cellSize / 2)}) 
                         >= character.getRadiusLight()) {
            ctx.fillStyle = "rgba(0,0,0,0.8)";
	    ctx.fillRect(x, y, cellSize, cellSize);
	}
	else {
	    ctx.fillStyle = "rgba(0,0,0,0.3)";
	    ctx.fillRect(x, y, cellSize, cellSize);
        }
    }
}

Но есть некоторые недочеты и тут так как вся система карты у меня построена на сетке 32х32 так и отрисовка немного "квадратная" получается...
Вот думаю как исправить.
Если кто подскажет красивую формулу вычета разницы между этими отступами и закрашивания соседних квадратов ровно по линии радиуса персонажа, буду безмерно благодарен!