Question

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.

Answer 1

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