I've looked a bit and think the answer to my question is "no", but here goes:

With Javascript and a canvas tag, I can draw nicely alpha-blended lines with stroke().

This is loads of fun, but I'd like to take it one step further by setting the blendmode for the stroke.
e.g., it looks like it's using the classic src * (alpha) + dst * (1 - alpha), and i'd like something like just src + dst, in order to get additive blending.

This page: seems to be doing blending pixel-by-pixel, which I'd really like to avoid.

I've looked a bit and think the answer to my question is "no", but here goes:

With Javascript and a canvas tag, I can draw nicely alpha-blended lines with stroke().

This is loads of fun, but I'd like to take it one step further by setting the blendmode for the stroke.
e.g., it looks like it's using the classic src * (alpha) + dst * (1 - alpha), and i'd like something like just src + dst, in order to get additive blending.

This page: http://www.andersriggelsen.dk/OpenGL seems to be doing blending pixel-by-pixel, which I'd really like to avoid.

• javascript
• html
• canvas
• blend

Share Improve this question Follow edited Feb 9, 2011 at 4:34 Phrogz 304k113113 gold badges667667 silver badges757757 bronze badges asked Feb 8, 2011 at 22:52 orion elenzilorion elenzil 5,49344 gold badges4545 silver badges5656 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

The only "blend modes" supported natively by HTML5 Canvas context are the Global Composite Operations:

• source-atop
• source-in
• source-out
• source-over
• destination-atop
• destination-in
• destination-out
• destination-over
• lighter
• darker (no longer in the spec)
• xor
• copy

See this link for an excellent animated interactive example of the modes. The add/screen mode that you want, however, is not among them.

If this functionality is important to you, I have written the free context-blender library to blend two canvases (or regions thereof) together using Photoshop-style blend modes. As you say, the internals of this (necessarily) perform pixel-by-pixel operations. It's not nearly as fast as a native positing mode, but it's not slow, either. It still lets you perform native stroke and fill operations on one (typically offscreen) canvas, and then posite the offscreen canvas onto another.

And yes, context-blender supports both 'screen' and 'add' blend modes. :)