I'm new to HTML5 canvas and I want to reproduce the result of BlendMode.ADD in ActionScript 3.

According to the documentation, here's what BlendMode.ADD does:

Adds the values of the constituent colors of the display object to the colors of its background, applying a ceiling of 0xFF. This setting is monly used for animating a lightening dissolve between two objects.

For example, if the display object has a pixel with an RGB value of 0xAAA633, and the background pixel has an RGB value of 0xDD2200, the resulting RGB value for the displayed pixel is 0xFFC833 (because 0xAA + 0xDD > 0xFF, 0xA6 + 0x22 = 0xC8, and 0x33 + 0x00 = 0x33).

Source: .html#ADD

How can I do the same thing to an image in HTML5 Canvas?

I'm new to HTML5 canvas and I want to reproduce the result of BlendMode.ADD in ActionScript 3.

According to the documentation, here's what BlendMode.ADD does:

Adds the values of the constituent colors of the display object to the colors of its background, applying a ceiling of 0xFF. This setting is monly used for animating a lightening dissolve between two objects.

For example, if the display object has a pixel with an RGB value of 0xAAA633, and the background pixel has an RGB value of 0xDD2200, the resulting RGB value for the displayed pixel is 0xFFC833 (because 0xAA + 0xDD > 0xFF, 0xA6 + 0x22 = 0xC8, and 0x33 + 0x00 = 0x33).

Source: http://help.adobe./en_US/FlashPlatform/reference/actionscript/3/flash/display/BlendMode.html#ADD

How can I do the same thing to an image in HTML5 Canvas?

• javascript
• canvas

Share Improve this question Follow edited Mar 11, 2017 at 22:20 JeePing asked Mar 11, 2017 at 21:26 JeePingJeePing 48911 gold badge77 silver badges1616 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

The specification of the 2D canvas has implemented the blending mode with the name "lighter" (not to be confused with "lighten" which is a different mode) that will do "add".

var ctx = c.getContext("2d");
ctx.fillStyle = "#037";
ctx.fillRect(0, 0, 130, 130);

ctx.globalCompositeOperation = "lighter";  // AKA add / linear-dodge
ctx.fillStyle = "#777";
ctx.fillRect(90, 20, 130, 130);

<canvas id=c></canvas>

(update: I was remembering (incorrectly) lighten as the name for it, so sorry for the extra manual step in the original version of the answer).