Menu
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.
701
The Overlay mode behaves like Screen mode in bright areas, and like Multiply mode in darker areas. With this mode, the bright areas will look brighter and the dark areas will look darker.
The Screen blend mode inverts both layers, multiplies them, and then inverts that result. The Color Dodge blend mode divides the bottom layer by the inverted top layer. This lightens the bottom layer depending on the value of the top layer: the brighter the top layer, the more its color affects the bottom layer.
The Color blend mode is actually a combination of the first two modes in the Composite group, Hue and Saturation. When you change a layer's blend mode to Color, only the color (that is, all of the hues and their saturation values) from the layer is blended in with the layer or layers below it.
The only "blend modes" supported natively by HTML5 Canvas context are the Global Composite Operations:
source-atopsource-insource-outsource-overdestination-atopdestination-indestination-outdestination-overlighterdarkerxorcopySee 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. :)
139
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
