I have been playing around with node-canvas in node.js trying to get gradients to look good on some images but the results have been underwhelming. Applying the gradient to a greyscaled image is giving me a very different result from the expected color. Ideally the result should closely match the original gradient.
Essentially what I'm doing is drawing the image, applying the gradient to the canvas with the "color" globalCompositeOperation, and using "destination-in" to redraw the image and apply the gradient to it. The hsl values I'm using are: hsl(264, 100%, 20%), hsl(180, 100%, 80%). I have tried changing the saturation and lightness values a lot but it still isn't giving me anywhere close to the expected result. I have considered using the "lighten" and "darken" features but that doesn't really end up looking good and ruins the gradient if a dark color is at the top and a light color is at the bottom like my example. I'm having the same problem with single colors and not gradients but I figure I can knock out two birds with one stone by doing gradients. I've tried pixel manipulation with single colors with very little success and I'm not sure how that'd work for gradients so I assume that can't be the solution. Is it because of the luminosity? If so, how do I fix the problem? Is there an easier way to go about this other than what I'm trying to do? Any help is greatly appreciated! I've attached two images displaying the gradient and then the result after applying the gradient.
