Bug 132949 – [CANVAS] Gradients don't apply correctly in combination with some compositing modes

• Component: Canvas
• Status: RESOLVED FIXED

[Branimir Lambov]

The linked fiddle tries to draw a stroke with a paint that requires transformation by drawing a black stroke followed by a 'source-in' fill, where the paint is a linear gradient.

Safari incorrectly paints the stroke in the final color of the gradient instead of rendering the gradient. This happens when source-in, source-out or destination-atop compositing mode is used.

The fiddle should result in two rectangles that look the same (the second one is stroked using the gradient directly, which is not always possible (e.g. for radial gradients with non-uniform scales)). The test works fine on Chrome on any platform, as well as Firefox and Opera on Linux. It fails on Safari MacOS and iOS (tested on MacOS 10.9.2, version 7.0.3, as well as iOS 7.1.1).

See also
http://jsfiddle.net/386sM/2/  (using source-atop to work around the problem for opaque paints, also swapping + destination in which is even more broken)
http://jsfiddle.net/386sM/5/  (testing all compositing modes for fill() and stroke())

[Branimir Lambov]

Created attachment 231501 [details]
Safari rendering

[Branimir Lambov]

Created attachment 231502 [details]
Expected rendering

[Branimir Lambov]

Note: the Safari output is also affected by
https://bugs.webkit.org/show_bug.cgi?id=132948

[Nikos Andronikos]

*** This bug has been marked as a duplicate of bug 129791 ***

[Nikos Andronikos]

(In reply to comment #4)
> 
> *** This bug has been marked as a duplicate of bug 129791 ***

Wrong duplicate entry - however I have checked that the issue was fixed before  before revision 170906