Photoshop-esque blend mode in web pages using CSS or JavaScript?

Question

Hi,

I am wondering if it is possible to blend two or more images together on a webpage using blend modes like you will find in photoshop (overlay, screen, lighten, etc).

I know that this kind of thing is possible with flash and java, but is it possible without any plugins i.e. with CSS or JavaScript? I have seen a few javascript examples of this effect that work on relatively small images, but I am interested in performing this on high resolution images... this is purely for experimental purposes.

Thanks in advance, Greg.

Answer 1

With the canvas element, you can get overlay and lighten pretty easily. It's all about what settings you specify before rendering each bitmap to the canvas.

http://dev.w3.org/html5/canvas-api/canvas-2d-api.html#compositing

https://developer.mozilla.org/en/Canvas_tutorial/Compositing