Могу Вам подсказать вот что (не утверджаю, что это самое оптимальное/лучшее/отличное решение):
Представим наше поле в виде матрицы:

0 0 0 0 0 0 0 0 0 0
0 0 0 1 1 1 1 0 0 0
0 0 0 0 0 0 0 0 0 0
0 0 1 0 0 0 0 0 1 0
0 0 1 0 0 0 0 0 1 0
0 0 1 0 0 0 0 0 1 0
0 0 1 0 0 0 0 0 1 0
0 0 1 0 0 0 0 0 1 0
0 0 0 0 0 0 0 0 0 0

где matrix[i][j] соответсвует размеру 1х1. Ну и все. Обходите матрицу, где 0 -> красим в черное (или ничего не делаем, если bg уже черный), где 1 -> красим в белое (что сложно! придется создавать очень много таких белых квадратиков)
осталось реализовать сдвиг всех элементов по всем 4 сторонам и все
Проблема в скорости, размер полотна 400х400, и матрица будет размером 160.000 (столько будет обходов)

красить каждый пиксель отдельно дорого, тут надо использовать алгоритм:
начинаем [i][j] i = 0; j = 0;

for (let i = 0 ...) { for (let j = 0; ... ) }

как встречаем 1, фиксируем левую точку для отрисовки прямоугольника. Далее, идем вправо, пока не найдем 0 или границу. Как только достигнули цели, идем вниз, находим нижнюю точку -> рисуем прямоугольник.
надо запоминать закрашенные площади, чтоб повторно туда не заходить (и не красить)

Кстати хорошая идея с матрицей. Я о об этом и не думал

в секундах :)

Так мне же перфоманс нужен, там SPA переход за 800 мс может быть. Госпади, почему я выбрал такой сложный путь....

как перевести строку "true" в значение bool true
а "false" в bool false
?

!!a

как перевести строку "true" в значение bool true
а "false" в bool false
?