HTML5 Canvas: возможно ли сделать скриншот канваса при изменении объекта без лагов?

thehighhomie, вопрос был не про сохранение, а про рендеринг во время показа.
Не могу понять: зачем каждый кадр то растрить?
Можно сказать, например:
"надпись появляется на позиции X,Y на 00:02сек, шрифт такой, размер, такой, исчезает через 00:10сек" (всё это хранится в JSON для каждого объекта сцены).
Т.е. сделать как проигрыватель объектов по тайм-шкале, а части тайм-шкалы - это и будут слайды презентации.

HTML5 Canvas: возможно ли сделать скриншот канваса при изменении объекта без лагов?

thehighhomie, В devtools есть много инструментов, включая "Память" и "Canvas". И, разумеется, память будет потребляться больше, т.к. всё зависит от длины ролика.
Если вы создадите систему динамической обработки очереди "шотов" несколькими воркерами, то размер памяти плавно переползёт в увеличенную загрузку CPU.

Вопросы:
1. а почему именно рендер именно на клиенте?!
2. почему не работать именно с json-матрицей отдельных объектов для их позиционирования и перемещения с помощью JS и без рендера в "шоты"?

HTML5 Canvas: возможно ли сделать скриншот канваса при изменении объекта без лагов?

thehighhomie, главное: анимашка 60fps, запись видео 5-10fps.
Если нужно именно 60fps - то лучше вначале набрать "сырой" массив объектов нужного региона без конвертации, и уже потом - обрабатывать.

HTML5 Canvas: возможно ли сделать скриншот канваса при изменении объекта без лагов?

thehighhomie, я этот линк как раз в ответ уже и добавил! :)

HTML5 Canvas: возможно ли сделать скриншот канваса при изменении объекта без лагов?

thehighhomie, пока нет времени на создание рабочего кода, но там довольно всё просто и алгоритм - я уже привёл...

Почему может не работать верная форма подписки на странице?

Shing, Ну! Надо же консоль браузера смотреть первым делом!
Ctrl+Shift+I

Есть ли способ перебить z-index?

ilovemaryjane, ну так об этом я и говорю. О компоненте! А не обо всём коде конкретного проекта.
Ну или просто:
1. При открытии оверлея - ставим его ниже хидера (top, высотой с хидер)
2. Скрываем ненужные элементы на хидере.
3. По закрытию оверлея - вновь показываем скрытые.

Почему может не работать верная форма подписки на странице?

Shing, возможно POST-запросы движок WP принимает только подписанные своим токеном, чтобы предотвращать попытки со стороны (+спам).

Есть ли способ перебить z-index?

ilovemaryjane, Раз "просто фиксед - всё ок", то может проще подумать: в каких случаях обязателен трансформ и сделать его не постоянным, а только в каких-то моментах?
Может это поможет или избавиться от него, или понять, где накладывать/снимать этот трансформ только через JS только тогда, когда это нужно?

Есть ли способ перебить z-index?

ilovemaryjane, вариант 2!
При открытии оверлея - копируешь ноду нужных элементов с хидера и воссоздаёшь на самом оверлее.

Есть ли способ перебить z-index?

ilovemaryjane, ну...... тут не получится и рыбку...., и.... не подавиться)
Обычно - все оверлеи не просят ничего.
У тебя - запрос: "оставьте мой хидер на месте при любом full-page оверлее!"
Суть понятна?)

Есть ли способ перебить z-index?

ilovemaryjane,

.two {
  position: fixed;
  top: 0; /*<-------- НЕТ! :) */

Есть ли способ перебить z-index?

ilovemaryjane, а почему нельзя открыть оверлей сразу ПОД хидером?!

Есть ли способ перебить z-index?

ilovemaryjane, я предлагаю реструктурировать ноды с использованием JS.
Чтобы понять как и для чего - надо понять, что ты хочешь добиться.
Т.к. пока - мне известна только половина задачи.
А при такой постановке задачи, как правильнее сделать - нереально предположить.))

Есть ли способ перебить z-index?

ilovemaryjane,

ты поменял структуру полностью. В моем коде 2 корневых дива, у тебя все свалено в один.

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

Есть ли способ перебить z-index?

ilovemaryjane, я уже понял, да... пытаюсь, но пока никак... возможно, что и никак нельзя...
А через JS реструктурировать да и всё?! Тоже не катит?)

Есть ли способ перебить z-index?

ilovemaryjane, не менял я структуру. расширь область кода (ресайз) - там переносы по пробелам наверное...

Почему супер-спецы гугла анимируют неэффективные значения? У вас тоже это выглядит убого?

ilovemaryjane, я подправил там.
В ответе:

(one - сверху, two - под one, other - внизу)

Глянь... Так надо было или в каком порядке?

Почему супер-спецы гугла анимируют неэффективные значения? У вас тоже это выглядит убого?

ilovemaryjane, ну я ссылку там оставил - там как нужно. Не смотрел?

Почему супер-спецы гугла анимируют неэффективные значения? У вас тоже это выглядит убого?

ilovemaryjane, а Есть ли способ перебить z-index? чем дело кончилось?