I'm trying to use a canvas to draw an image with a colored filter over it. As css has the hue-shift filter, I'm using that to apply on the canvas. The catch is that I have a palette and I want to shift the color via the color the user presses on the palette. I've already gotten the RGBA value from clicking on the palette - I'm just not sure how to use this to create a color filter for the image itself.
function changeColor2(e) {
x2 = e.offsetX;
y2 = e.offsetY;
var imageData2 = firstContext2.getImageData(x2, y2, 1, 1).data;
rgbaColor2 = 'rgba(' + imageData2[0] + ',' + imageData2[1] + ',' + imageData2[2] + ',1)';
colorLabel2.style.backgroundColor = rgbaColor2;
console.log(rgbaColor2);
context.filter= 'grayscale(100%)' + 'sepia(100%)';
//context.strokeStyle = 'rgba(' + imageData[0] + ',' + imageData[1] + ',' + imageData[2] + ',1)';
}
Where would I go from here to get the color shift?
Maybe the "hue" blending mode will do for you:
globalCompositeOperation to "hue".const inp = document.querySelector("input");
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const img = new Image();
img.src = "https://picsum.photos/300/300";
img.decode().then(() => {
canvas.width = img.width;
canvas.height = img.height;
inp.oninput = e => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = "hue";
ctx.fillStyle = inp.value;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = "source-over";
};
inp.oninput();
});<input type=color value=#cca633><br>
<canvas></canvas>