[laimas]

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

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

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

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