Если при условии что все что не тру это фолс, то можно так

Это вариант с полотном и окном? т.е. внизу будет полотно с буквами П, а мы просто будем скользить по нему "окном" и отображать нижнее
тогда проблема, как нижнее полотно зациклить

Если не сложно, можно подробнее, а то не понял, что вы имели ввиду

Отрисовали в одну канву которая где-то, сохранили, потом через drawImage выводим на вторую канву в нужных координатах

посчитать сколько будет обрезано - легко остатком от деления смещения )

Точно, хорошее решение в плане алгоритмической сложности, намного лучше 400х400 матрицы)
если за границы не вылезли и все ОК, то одно изображание накладываем на конву, если вылезли, считаем точки, и два изображения накладываем. Надо будет закодить, спасибо за идею

Картинка не будет меняться?

Есть еще более инженерное решение

вы можете ее один раз отрисовать, преобразовать в картинку с помощью toDataUrl(), назначить эту картинку в виде background'а к диву с repeat, и потом просто управлять CSS-свойствами дива и пусть браузер считает

Буква П на изображении? Нет, не будет
По поводу решения выше, могут быть  нюансы. Задание тестовое, и грейдер может не пропустить такое решение. Может быть там упор на работу с канвасом и система ждёт, что на события нажатия на стрелки, будет вызов методов Canvas API

Если грейдер работает на сриншотах, то решение пройдёт

что за доклад? можно ссылку?

Наверное Holy js

Ребят вопрос есть
Есть три строки
Во второй строке есть элемент которому нужно сделать фон(просто белый круг) который выходит за границы элемента и при этом соседние строки не расталкиваются а сам элемент остаётся ровно в центре круга
Может кто знает как такое сделать?

Сложновато конечно на пальцах объяснять, но попробую )))

В том элементе, в котором нужен белый круг можно поместить ещё один div сделать ему position absolute ну и соответственно задать геометрические размеры. Для того чтобы он не перекрывал предыдущую строку нужно всем выбрать правильный z-index.

Ну или можно вообще сделать для этих трёх строк общий wrapper (элемент обертку) и позиционировать круг относительно этого элемента-обертки. В таком случае z-index вам не понадобится.

Надеюсь правильно понял кашу задачу и правильно подсказал ))))

@iamnikond3300 https://pastebin.com/2ENBJCgr если интересно решение от яндекс.практикум

.parent {overflow: hidden, position: relative}

.parent:before {
content: '';
width: calc(100% + smth)
height: calc(100% + smth)
border-radius: 50%;
position: absolute;
}

Доброго дня. Есть кодовая база часть js часть tsx Можно ли как-то настроить раздельный линт для жс и ts eslint + typescriot-eslint/plugin?

Да, вы в eslint можете делать overrides по маске

Спасибо буду пробовать