Как в canvas перекрасить одновременно два фото?

Question

[Дмитрий Казаринов]

Есть два фото поделенные на две части и у них одинаковые размеры, вместе они выглядят как одно.


Мне нужно чтобы я мог перекрасить одновременно оба по событию js 'input'.

То есть есть кнопка где я выбираю цвет одному изображению потом второму.

Сейчас у меня сложность в том что при перекраске красится весь холст. И я не могу узнать размер крашенной области.
Значит нужно красить последовательно с начало одно фото потом другое.

Как это сделать?

Вот мой код

this.ctx.clearRect(0, 0, this.$canvas.width, this.$canvas.height);

let colorPrimary = $('.kcustom-colors__primary').parents('tr').find('.kcustom-colors__scheme').val();
let colorSecond  = $('.kcustom-colors__second').parents('tr').find('.kcustom-colors__scheme').val();

/* Image 1 */
this.ctx.save();

this.ctx.drawImage(kcustomColorsImages['splitPrimary'], 0, 0);

this.ctx.globalCompositeOperation = "source-in";

this.ctx.fillStyle = colorPrimary;
this.ctx.fillRect(0, 0, this.$canvas.width, this.$canvas.height);

this.ctx.globalCompositeOperation = "destination-atop";

this.ctx.restore();

/* Image 2 */
    this.ctx.save();

    this.ctx.drawImage(kcustomColorsImages['splitSecond'], 0, 0);

    this.ctx.globalCompositeOperation = "source-in";

    this.ctx.fillStyle = colorSecond;
    this.ctx.fillRect(0, 0, this.$canvas.width, this.$canvas.height);

    this.ctx.globalCompositeOperation = "destination-atop";

    this.ctx.restore();

Answer 1

[Alexandroppolus]

Сейчас у меня сложность в том что при перекраске красится весь холст.

https://developer.mozilla.org/en-US/docs/Web/API/C...