Grayscale Image Converter
A canvas filter with an adjustable amount, from slight desaturation to full black and white.
Result
Output
—
Worked example
Canvas filters are applied at draw time, not after. Setting the filter before drawImage is what makes it work; setting it afterwards has no effect on already-drawn pixels.
Grayscale conversion uses the luminance of each pixel rather than a simple average of red, green and blue — the eye is far more sensitive to green than to blue, so an equal average makes skin tones look wrong.
Partial desaturation
Anything below 100% mutes colour without removing it. That is useful for pushing an image behind text on a hero section while keeping it recognisable.