7

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.

Phrogz
  • 296,393
  • 112
  • 651
  • 745
orion elenzil
  • 4,484
  • 3
  • 37
  • 49

1 Answers1

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 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. :)

Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • 1
    you're right - the operations provided don't really give "Add", altho i might investigate "Lighter" to see if it's close enough to what i'm after. .. Sweet ! it's close ! i'll take a look at your blender library as well. it may be that a combination of the two could get both speed and sufficient accuracy for my use. thanks again. – orion elenzil Feb 09 '11 at 18:48
  • 1
    Unbelievable that there is no additive blend mode for canvas. The simplest of all blend modes to implement and so important to have! – sleep Aug 31 '13 at 13:46
  • 1
    "lighter" is additive. It's just a really poorly-chosen name. – Glenn Maynard May 27 '17 at 20:17