imagance

root.render(
  <App />
);

Во-первых, REST - это не стандарт, не строгие правила, это рекомендации.
Вся суть этих рекомендаций сводится к двум вещам:
- Каждый ресурс (документ, данные о сущности) имеет свой собственный URI
- Для каждого действия с ресурсом предлагается в соответствие свой HTTP метод запроса

Теперь по вопросам:
1. Если данные json и html - это просто разные представления одного ресурса, то они вполне могут жить на одном URI. Например разное представление отдается в зависимости от HTTP заголовка Accept.
2. REST никак не регламентирует, как Вам строить приложение. Это может быть отдельный запрос к сущности "роль" или быть частью сущности "пользователь", решать Вам.
3. Опять же, REST тут вообще не причем. В REST нет никаких БД, сессий или еще чего либо, что Вы там под капотом используете инкапсулировано от клиента.
4. CSRF делается как и в любом другом случае. Вот статья есть: https://habr.com/ru/post/318748/

Не правильный json, множественные корневые элементы.

[
   {
      "login":"igor",
      "password":"qwerty"
   },
   {
      "login":"igor",
      "password":"qwerty"
   },
   {
      "login":"igor",
      "password":"qwerty"
   }
]

Можно в лоб, регулярками.

let str = '(2(3AC)A)';
while (str.includes('(')) {
  str = str.replaceAll(/\((\d+)([a-z]+)\)/gi, (match, p1, p2) => p2.repeat(+p1));
}
console.log(str); // ACACACAACACACA

Можно конечный автомат написать.

Функция draw не затирает то, что было нарисовано на канве.
Сделай перед рисованием картинок очистку канвы, например, ctx.clearRect(0, 0, cvs.width, cvs.height);