Canvas 2D globalCompositeOperation (lighter) [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 10 years ago.

According to the specification on http://dev.w3.org/html5/2dcontext/#dom-context-2d-globalcompositeoperation, the "lighter" composition is "A plus B".

Let's say this is my situation:

• Canvas background color: red (#FF0000)
• Draw a linear gradient from green (#00FF00) to black (#000000)
• Expected result: linear gradient from yellow (#FFFF00) to red (#FF0000)

However, the "lighter" composite operation does not seem to add the colors. Instead, it simply draws the green/black gradient over the red background.

Preview: http://jsbin.com/uvaje4/4/ & Code: http://jsbin.com/uvaje4/4/edit

Some notes:

1. I开发者_开发问答've tested this on chrome, firefox & opera. I can only see 3 options: No browser has implemented the "lighter" composition yet, or the specification is plain wrong, or my code is wrong.
2. I realise it would be simple to create a gradient from yellow to red, but I need the "lighter" operation to work for more complicated drawings.

---

Spelling error on lighter FTL :O http://jsbin.com/uvaje4/5/

---

For the record, turning on strict warnings in Firefox would have caught this problem.