Question

I want to put a red rectangular <div> element over my webpage so that it would look not only transparent, but also like blended in Photoshop’s Multiply mode.

The <div> would have position: fixed, so the content below it would change quickly.

Is that possible with any HTML5 / CSS3 / canvas / SVG trick?

Answer 1

I have created a separate, lightweight, open-source library for perform Photoshop-style blend modes from one HTML Canvas context to another: context-blender. Here’s the sample usage:

// Might be an 'offscreen' canvas
var over  = someCanvas.getContext('2d');
var under = anotherCanvas.getContext('2d');

over.blendOnto( under, 'screen', {destX:30,destY:15} );

See the README for more information, including the currently-supported blend modes.

You could use this to perform multiply from one canvas to another, but not over standard HTML elements.