898375 - globalCompositeOperation destination-atop renders incorrectly

Status: UNCONFIRMED

(Core :: Graphics: Canvas2D, defect)

Description

[Mathieu]

Attachment: Screen Shot 2013-07-26 at 12.09.10.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.22 Safari/537.36

Steps to reproduce:

Get a canvas context
Set the globalCompositeOperation to 'destination-atop'
Draw a rectangle using 'rect'
Call fill()
Call stroke()

Here's an example on JSFiddle: http://jsfiddle.net/9hPjM/


Actual results:

A rectangle is stroked (outline only, not filled).


Expected results:

A rectangle should have been filled and stroked

Comment 1

[Mathieu]

Attachment: Chrome-Safari-Opera Screenshot (expected behaviour)

Comment 2

[Jeff Muizelaar [:jrmuizel]]

Firefox's behaviour seems correct to me.

Destination which overlaps the source replaces the source. Source is placed elsewhere.

"http://dev.w3.org/fxtf/compositing-1/#porterduffcompositingoperators_dstatop"

Comment 3

[Mathieu]

Thanks for having a look at this!

Shouldn't the stroke operation be treated as a complementary operation rather than a new shape to prevent the source to be placed elsewhere?

The related problem is, given an rgba colour such as rgba(0, 0, 0, 0.5), how can a stroked shape be filled without producing a darker colour where the stroke and fill meet?
Example here: http://jsfiddle.net/x8p2V/1/
With dest-atop to avoid the problem (on webkit browsers): http://jsfiddle.net/x8p2V/2/

The suggestion of using dest-atop came from this StackOverflow answer: http://stackoverflow.com/a/9231748/1099745

Comment 4

[Jeff Muizelaar [:jrmuizel]]

(In reply to Mathieu from comment #3)
> Thanks for having a look at this!
> 
> Shouldn't the stroke operation be treated as a complementary operation
> rather than a new shape to prevent the source to be placed elsewhere?

I don't think so. Internally we treat the fill and stroke operations as completely separate operations. I checked IE11 and Opera (pre-chrome) and they both behave the same way as Firefox.

> 
> The related problem is, given an rgba colour such as rgba(0, 0, 0, 0.5), how
> can a stroked shape be filled without producing a darker colour where the
> stroke and fill meet?

Good question. No solution immediately springs to mind.

> Example here: http://jsfiddle.net/x8p2V/1/
> With dest-atop to avoid the problem (on webkit browsers):
> http://jsfiddle.net/x8p2V/2/
> 
> The suggestion of using dest-atop came from this StackOverflow answer:
> http://stackoverflow.com/a/9231748/1099745

Comment 5

[Mathieu]

Webkit seems to have a long running ticket regarding globalCompositeOperation (https://bugs.webkit.org/show_bug.cgi?id=46506), I guess they are sort of aware of the problem already (which then seems to be on their side).

On the other hand, by randomly switching globalCompositeOperation to check what would be rendered, it seems that 'xor' is doing what I want both on Chrome and Firefox. However, is that supposed to be the correct behaviour (I somehow expected the darker line to just disappear)?

Example with 'xor': http://jsfiddle.net/mmBfa/

Comment 6

[Mathieu]

Sorry about that but the 'xor' with 0.5 opacity is a special case. All other opacity values won't work: http://jsfiddle.net/mmBfa/1/