Replicate the partial CSS Grayscale filter in JavaScript?

Question

I can convert an image to fully grayscale version easily. What I can't do is replicate partial grayscaling. For example,

.image {
  filter: grayscale(0.5);
}

This filter applied in CSS will only turn the image partially grayscale. I want to do the same in JavaScript on a canvas image. Can anyone please help me with that?

I know how to make an image fully grayscale. I am looking for a way to make the effect less intense and I want to do it using JavaScript canvas.

All the images above have the grayscale filter applied with different intensities.

Layer grayscale image over original image and lower the opacity? Or other way around — Jari Pekkala, Nov 24 '16 at 13:46
@JariPekkala something like that but I have no idea how to do it. :) — Neena Vivek, Nov 24 '16 at 13:47
You're using the wrong words. You don't make it greayscale by some value, you actually "desaturate" it. Once you write that in google there's many results. Example: http://stackoverflow.com/questions/13806483/increase-or-decrease-color-saturation — Jonas Grumann, Nov 24 '16 at 13:57
@JonasGrumann but staturation and grayscale are two different filters in CSS. Do they work exactly the same way? — Neena Vivek, Nov 24 '16 at 14:02
They work semi-inverted. Grayscale actually applies a black/white layer over the existing colors, whereas saturation (or desaturation in this case) **removes** the color from the original image. — roberrrt-s, Nov 24 '16 at 14:05
Mmmh you got me thinking there. Google says: Saturation defines a range from pure color (100%) to gray (0%) at a constant lightness level — Jonas Grumann, Nov 24 '16 at 14:07

score 4 · Accepted Answer · edited Sep 26 '17 at 15:06

Use the ctx.globalCompositeOperation = "saturation"

ctx.drawImage(colourImage,0,0); // draw colour image onto canvas
ctx.globalCompositeOperation = "saturation"; // set the comp mode
ctx.fillStyle = "hsl(0," + Math.floor(amount) + "%,50%); // set a colour with saturation 0-100

// OR use RGB for finer control
ctx.fillStyle = "#FFF"; // white no colour
ctx.globalAlpha = amount; // the amount of saturation you wish to remove 0-1

ctx.fillRect(0,0,colourImage.width,colourImage.height);

There are many effect that can be created by using the globalCompositeOperation types "source-over,lighter,darker,source-atop,source-in,source-out,destination-over,destination-atop,destination-in,destination-out,copy,xor,multiply,screen,overlay,color-dodge,color-burn,hard-light,soft-light,difference,exclusion,hue,saturation,color,luminosity"

Not all browsers support all operation (Most notable is FF not supporting darker use multiply instead) But chrome, Edge, and Firefox support all the others listed above.

More on saturation and Colour to Black and white][2] below, both methods give very fine control over the amount of the effect

Increase the Color Contrast With Saturation

Increase the saturation level of an image with

ctx.globalCompositeOperation = 'saturation';

The amount of the effect can be controled with the alpha setting or the amount of saturation in the fill overlay

// Render the image
ctx.globalCompositeOperation='source-atop';
ctx.drawImage(image, 0, 0);

// set the composite operation
ctx.globalCompositeOperation ='saturation';
ctx.fillStyle = "red";
ctx.globalAlpha = alpha;  // alpha 0 = no effect 1 = full effect
ctx.fillRect(0, 0, image.width, image.height);

Colour to Black and White

Remove color from an image via

ctx.globalCompositeOperation = 'color';

The amount of the effect can be controled with the alpha setting

// Render the image
ctx.globalCompositeOperation='source-atop';
ctx.drawImage(image, 0, 0);

// set the composite operation
ctx.globalCompositeOperation='color';
ctx.fillStyle = "white";
ctx.globalAlpha = alpha;  // alpha 0 = no effect 1 = full effect
ctx.fillRect(0, 0, image.width, image.height);

In addition to this, Firefox as well as Chrome/Opera do support CSS filters with context directly now, so you can set `ctx.filter = "grayscale(0.5)";` Not sure about Edge though, and there should be little difference in regards to performance as CSS and context blending modes are the same. Just mentioning this as a future option which can simplify the whole process when fully supported. — , Nov 26 '16 at 05:56
using `globalCompositeOperation = "saturation"` was the best way I could find for removing the colour from a polygon area of an existing canvas image, thanks! — Pend, Oct 05 '22 at 02:48

Replicate the partial CSS Grayscale filter in JavaScript?

1 Answers1

Linked