Are photoshop-like blend modes possible in HTML5?

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 posi开发者_StackOverflowtion: fixed, so the content below it would change quickly.

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

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.

No (not natively) but it's coming soon: http://blogs.adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web/

You can also look at this demo: http://media.chikuyonok.ru/canvas-blending/ to see how to do this with canvas.

Check the source for blending modes' formulae and how to apply them (formulae are much more readable than in pixastic or context-blender).

This isn't HTML5, but it's as close as I can find for what you're asking.

Javascript blending modes (OpenGL).

I don't think "blend modes" like Photoshop could be emulated with just pure HTML, unless the language took a sharp turn in another direction. But it would be great to see some easier way of doing this.

I am also very interested in doing that. Many layouts that I coded for visual designers could have used that. Aside from the other posts in this thread, there is a way to do this, currently only in Firefox 4, without using OpenGl or Canvas. It's trough the use of SVG filters. Aparrently it's on nighties from Webkit and Chrome also, but I couldn't see anything working yet.

Here are some demos and explanations:

• (demo) http://people.mozilla.org/~roc/filter.xhtml
• https://developer.mozilla.org/en/applying_svg_effects_to_html_content
• https://developer.mozilla.org/web-tech/2008/09/15/svg-effects-for-html-content/
• http://weblogs.mozillazine.org/roc/archives/2008/06/applying_svg_ef.html

IMHO something anyware close to blend modes are too much hard to achieve right now. It's very hard to find any references on feConvolveMatrix, feSpecularLighting, or feColorMatrix, and the examples are just impossible to figure out for me. They could work but I don't know how.

I wish something like EffectGames suggested:

div.sprite {
   position: absolute;
   z-index: 2;
   composite: add;
}

This would be a way better approach. Maybe some ninja there skiled in mathematics could make us a lib to do that.

EDIT: There is an easier SVG spec to do exactly blend modes. But no browser that I tested have this working (FF4, IE9, Opera11, Webkit Nightly): http://dev.w3.org/SVG/modules/compositing/master/SVGCompositingPrimer.html - But I also don't know if this will be possible to use in HTML-DOM elements.

This is the closest I have seen, and yes, all assets have to be in the canvas. Note that Internet Explorer starts supporting canvas in version 9 which is not out yet, so if you have to support IE<9 you'll have to use a workaround.

It's landed in Chrome Canary so should reach release soon. http://blogs.adobe.com/webplatform/2013/04/23/all-blend-modes-for-css-fragment-shaders-have-landed/

You can already use it with just simple CSS (no Canvas). Example:

mix-blend-mode: 'multiply'

Internet Explorer may not support it, but the other browsers do.

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

Depending on the images involved and the exact effect you are after, you might be able to do some creative layering of images and CSS gradients to achieve the desired affect:

http://jonathonhill.net/2012-04-23/blending-css-gradients-like-photoshop/

I have implemented most popular blend modes known from gimp/photoshop using canvas in http://canvasquery.com/ however it is not suitable for relatime.

This will change with introduction of native blend modes in canvas

https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingseparable