Канва, отображение результата

[laimas]

На канве рисуются части изображения источника. У каждой такой части справа/снизу добавляется тиснение, срезаются уголки (правый верхний, нижний левый) на размер тиснения, затем она с тенью помещается на канву, то есть на это требуется N времени. Размеры канвы, а следовательно и результирующего изображения, рассчитывается по параметрам этих частей (количество, координаты, размеры), с добавлением величины зависящей от параметров тени.

Результат отображается в элементе на странице. Так как размеры конечного изображения могут быть различны, то оно определяется как фоновое изображение этого элемента с backgroundSize равным 'contain', чтобы центрировалось автоматически. Но так как каждая часть рисуется последовательно, то если результат отображать сразу, по мере отрисовки частей в канве, то на экране все будет "скакать". Поэтому отображается полностью созданное конечное изображение, по возвращению состояния promise.

Все нормально когда процесс запускается кнопкой "создать ...", но при изменениях параметров тиснения и тени (это поля range), даже учитывая то, что процесс запускается не по событию изменения в них, а по отпусканию кнопки мыши, видна смена изображения, сначала пропадает старое, затем появляется новое.

Как избавится от этого?

[рони]

laimas,
так может использовать второй(или виртуальный) слой и в нём рисовать, в выводить на верхний по готовности?

[laimas]

использовать второй(или виртуальный) слой и в нём рисовать

Да, так можно, только не слоем на странице, а через cssRules, так как при добавлении через element.style.backgroundImage, нужно указывать не только это, а все стили слоя, поэтому управляется через cssRules. Но боюсь, что и в этом случае могут быть "всполохи смены", так как ранее тема была - анимация фона, сделал ее также сменой свойств двух правил в cssRules, все нормально, но иногда бывает "вспышка", а причину так и не смог ни понять, ни отловить.

Мне так кажется, что если работать с данными канвы, даже если это по максимуму 1500х1000 ячеек, то было быстрее и нагляднее. Это PNG на выходе с прозрачным фоном, следовательно перед созданием канва очищается. Но можно очищать область в которой будет перерисовка в текущий момент. Бог его знает, как это будет выглядеть в реальности, но думаю быстрее чем создание тиснения через две канвы, с тенями внутренними и т.п. В этом случае, если изменяются параметры тиснения, то нужно перерисовать только их, если тень, то только ее с изменением размера всего изображения, но это только размер тени.

И хочется, и колется, но математикой заниматься не охота, да и времени нет пока.

[laimas]

В общем это проблема FF, и никаким способом не получается ее решить. У всех на движке Chromium никаких проблем даже при изменениях параметров, правда есть задержка небольшая в реакции, но нет мерцания ни малейшего.