Sepia FX with "luminosity"

Create a colored sepia FX with

ctx.globalCompositeOperation = 'luminosity';

In this case the sepia colour is rendered first the the image.

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.fillStyle = "#F80";  // the color of the sepia FX
ctx.fillRect(0, 0, image.width, image.height);

// set the composite operation
ctx.globalCompositeOperation ='luminosity';

ctx.globalAlpha = alpha;  // alpha 0 = no effect 1 = full effect
ctx.drawImage(image, 0, 0);

Found a mistake? Have a question or improvement idea? Let me know.

Table Of Contents