Опять двойка... мне стыдно(((
СПАСИБО, Рони! :thanks:
P.S. Возможно, Вам пригодится следующий "интересный" факт: экспериментируя с количеством и размерами исходных изображений для canvas, я обнаружил, что размеры таблицы с сегментами заметно уменьшены и сами сегменты неравномерно размещаются в таблице... вот такие дела)

Здравствуйте, Рони! :)
Экспериментируя с некоторыми вариантами вашего кода, перенёс пути к изображениям из скрипта в стили:

<style type="text/css">

[data-id="girl"] {
            background-image:url(https://loremflickr.com/150/150/girl?random=1);
            width: 150px;
            height: 150px;
        }
[data-id="dog"] {
            background-image:url(https://loremflickr.com/150/150/dog?random=2);
            width: 150px;
            height: 150px;
        }
[data-id="boy"] {
            background-image:url(https://loremflickr.com/150/150/boy?random=3);
            width: 150px;
            height: 150px;
        }
[data-id="kitten"] {
            background-image:url(https://loremflickr.com/150/150/kitten?random=4);
            width: 150px;
            height: 150px;
        }
    </style>

Но не могу понять, как изменить следующие строки скрипта, чтобы в нём указать отсылку к изображениям в стилях:

const images = [
            "https://loremflickr.com/150/150/girl?random=1",
            "https://loremflickr.com/150/150/dog?random=2",
            "https://loremflickr.com/150/150/boy?random=3",
            "https://loremflickr.com/150/150/kitten?random=4"
        ];

:help:

Борис К,
пас, умных мыслей, как это сделать, нет.

Борис К,
тебе понадобится вытащить ссылки из таблицы стилей
кури начиная отсюда: https://developer.mozilla.org/en-US/...nt/styleSheets

Alexandroppolus, благодарю за подсказку!)
P.S. Пока такое высшая математика((

Борис К,
это весьма и весьма далеко от высшей математики.

0) открой консоль разработчика на странице своего приложения, лучше в Хроме

1) введи строку document.styleSheets , нажми энтер.

2) тебе вывалится здоровенный объект, и раскрывая ветви дерева, ты увидишь всю правду о таблицах стилей в твоем документе.

Остается только с помощью js забрать из этого объекта всё нужное.

Это я образно о своих "способностях"!((
Благодарю за подсказку!))

И потом можно медитировать над
https://developer.mozilla.org/en-US/...nt/styleSheets
https://developer.mozilla.org/en-US/.../CSSStyleSheet
https://developer.mozilla.org/en-US/...eb/API/CSSRule
https://developer.mozilla.org/en-US/...I/CSSStyleRule
и связанными темами.
CSSom немного посложнеее, чем Dom на мой взгляд.
+ некоторые неточности по сравнению с тем, что реально есть в браузере.

Voraa, спасибо за ссылки!))
/Но только не ругайтесь за следующий вопрос)/
Вообще возможно ли сделать так, чтобы в массиве обсуждаемого кода, например, вместо одного из изображений ("https://loremflickr.com/150/150/girl?random=1") был красный квадрат, созданный из следующего стиля:

background-color: #ff0000;
            width: 150px;
            height: 150px;

?
P.S. У меня есть опасения, что я мог быть ранее неправильно понят.((

Многое чего можно сделать. Весь вопрос в сложности.
Зачем для каждого квадрата в css указывать width и height? Разве они могут отличаться?
Достаточно создать одно правило для всех квадратов (через класс и атрибут) и там указать ширину и высоту

[data-id] {
            width: 150px;
            height: 150px;
        }
[data-id="girl"] {
            background-image:url(https://loremflickr.com/150/150/girl?random=1);
        }
[data-id="dog"] {
            background-image:url(https://loremflickr.com/150/150/dog?random=2);
        }
[data-id="boy"] {
            background-image:url(https://loremflickr.com/150/150/boy?random=3);
        }
[data-id="kitten"] {
            background-image:url(https://loremflickr.com/150/150/kitten?random=4);
        }