Set blendmode for drawing strokes?

Question

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.

Answer 1

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 compositing mode, but it's not slow, either. It still lets you perform native stroke and fill operations on one (typically offscreen) canvas, and then composite the offscreen canvas onto another.

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