CODEWITHSUNDEEP
javascriptimagecanvashsl
Jacob Kelley
Jacob Kelley

Reputation: 395

How can I adjust the huse, saturation, and lightness of in image in HTML5 Canvas?

The simplest method possible is preferable. I unfortunately don't know much about image manipulation!

Upvotes: 1

Views: 5538

Answers (1)

Blindman67
Blindman67

Reputation: 54026

You can use the globalCompositeOperation ,"hue","saturation","color", and "luminosity"

Where

  • "hue" will change the destination hue to the hue to that of the source.
  • "saturation" will change the destination saturation to that of the source
  • "color" will change the destination color to that of the source.
  • "luminosity" will change the destination luminosity to that of the source

For example if you want to change the image saturation to full saturation

ctx.drawImage(image,0,0); // image to change
ctx.globalCompositeOperation = "saturation";
ctx.fillStyle = "hsl(0,100%,50%)";  // saturation at 100%
ctx.fillRect(0,0,image.width,image.height);  // apply the comp filter
ctx.globalCompositeOperation = "source-over";  // restore default comp

If you want finer control you will have to do it pixel by pixel using getImageData and setimagedata but this can be very slow. For speed you are best to use a webGL filter that will compare to the above comp modes in terms of speed, but the trade off is code complexity.

Upvotes: 3

Related Questions