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.
Share Improve this question edited Feb 9, 2011 at 4:34 Phrogz 304k113 gold badges667 silver badges757 bronze badges asked Feb 8, 2011 at 22:52 orion elenzilorion elenzil 5,4934 gold badges45 silver badges56 bronze badges1 Answer
Reset to default 7The only "blend modes" supported natively by HTML5 Canvas context are the Global Composite Operations:
source-atopsource-insource-outsource-overdestination-atopdestination-indestination-outdestination-overlighterdarkerxorcopy
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. :)