xmoonlight

1. Расширять динамически канвас (холст), когда объект перетаскивается за границы, но не давать объекту скрыться (расширять на величину не более 80% от ширины или высоты, например).
2. На канвас, сверху, наложить "ширму": слой c "прозрачностью" (pointer-events) для событий мыши (и с прямоугольником в центре - видимая рабочая область в канвасе): pointer-events: none; Тогда при выделении, того, что находится под слоем-"ширмой", видно не будет, но границы области выделения будут растягиваться (событие выделения объекта) за этим слоем-"ширмой". Т.е., будет работать так, будто всё видно.

Здесь все варианты pointer-events.

Всё просто.
Чтобы снять скрин - нужно время: T1
Чтобы перерисовать сцену/объект - нужно время: T2
А вот чтобы сделать копию региона canvas - нужно время T3.
Подытожим: T1>T2>T3

Чтобы снять быстро скрин, нужно:
1. Получить нужный регион из визуальной сцены (игрового canvas'a) в переменную
2. Создать новый объект канваса в памяти (без помещения в DOM!)
3. Скопировать в него изображение из переменной
4. Сохранить куда нужно

Копирование - тут.
После того, как заберёте фрагмент - сразу переходите в асинхронный режим, передав сохранение воркеру. Ну и каждый кадр сохранять (60fps) - не советую, если это возможно.

Скорее всего, рекурсионный вызов из-за this и переменная меняет значение как снежный ком. Попробуйте использовать явное приращение, используя модуль от разницы текущего и предыдущего значения события.

^(?=.*?(?=[A-Z]|[!@#$%]))(?=.*?[a-z])(?=.*?[0-9]).{8,}$

Чуть проще и понятнее: тут и тут

PS: И бонус, как всегда: тут.

window.document.hasFocus = () => true;

https://prismjs.com/

тут

Такой вот экзотический вариант.