html5-canvas Compositing Sepia FX with "luminosity"


Example

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);

enter image description here