hue-shift given rgba value in javascript?

Question

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?