рони, в продолжении темы - на канвас добавляем по картинке при клике на кнопку:
let cvs = document.getElementById('canvas');
let button = document.getElementById('button');
let ctx = cvs.getContext('2d');
let colors = [[255,255,0],[228,60,30],[53,198,29]];
let colorLength = colors.length;
let flag = false;
let images = [];
let options = {
width: 400,
height: 400
};
function resize() {
cvs.width = document.documentElement.clientWidth;
cvs.height = document.documentElement.clientHeight;
};
function addImage(e) {
if (images.length === colorLength) {
console.log('больше нельзя добавлять картинок');
return;
}
console.log('Добавили новую картинку');
let img = new Image();
img.src = 'images/1.png';
let color = colors.pop();
console.log(color);
img.addEventListener('load', () => {
images.push(img);
let x = 0;
switch (images.length) {
case 2:
x = 400;
break;
case 3:
x = 800;
break;
default:
x = 0;
}
ctx.drawImage(img, x, 0, options.width, options.height);
let imageData = ctx.getImageData(0,0, img.width, img.height);
let data = imageData.data;
for (let i = 0, n = data.length; i < n; i += 4) {
if (data[i] !== 0 && data[i + 1] !== 0) {
data[i] = color[0];
data[i + 1] = color[1];
data[i + 2] = color[2];
}
}
ctx.putImageData(imageData, 0, 0);
});
}
resize();
button.addEventListener('click', addImage);
colors - это массив, который содержит цвета (ну для примера). Далее нам нужно добавить несколько картинок. Тип у них одинаковый (прозрачный фон и заливка фигуры желтая). но на выходе нужно каждую новую картинку раскрасить в новый цвет. Из массива colors берем последний элемент (первый дольше, да и разницы нет). И красим картинку. С первой картинкой все в порядке. но дальше уже хуже. Я как понимаю что let imageData = ctx.getImageData(0,0, img.width, img.height); берет data не текущей картинки которую мы вставили, а уже существующей. Как каждую новую картинку раскрашивать в нужный цвет???