[Роман Андреевич]

Коллеги, доброго времени суток, начал разбирать canvas и немного тупить начал, одновременно.

Стоит задача следующая, получаю картинку не суть как, она приходит и нормально. Картинка png - прозрачный фон + какая-то фигура одно цвета - желтого rgba(255, 255, 0, 1).

При клике на нее, я получаю данные какие мне нужно, но мне нужно ее перекрасить в другой цвет. например - rgba(228, 60 , 30 ,1);

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

let cvs = document.getElementById('canvas');
let ctx = cvs.getContext('2d');

		function resize() {

			cvs.width = document.documentElement.clientWidth;
			cvs.height = document.documentElement.clientHeight;

		};

		resize();

		let img = new Image();
		img.src = 'images/1.png';

		img.style.display = 'block';

		img.addEventListener('load', () => {

			let options = {

				sX: 0,
				sY: 0,
				sWidth: 400,
				sHeight: 400

			}

			ctx.drawImage(img, options.sX, options.sY, options.sWidth, options.sHeight);

		});

		cvs.addEventListener('click', (e) => {

			// console.log(ctx.getImageData(e.offsetX, e.offsetY, 1, 1).data);

			let imageData = ctx.getImageData(0,0, cvs.width, cvs.height);

			imageData.data[0] = 228;
			imageData.data[1] = 60;
			imageData.data[2] = 30;
			imageData.data[3] = 225;

			ctx.putImageData(imageData, 0, 0);

		}, false);

		canvas.addEventListener('contextmenu', (e) => {

			e.preventDefault();

		});

В примере выше не работает никак. Заранее благодарю.