Apply globalAlpha on the canvas filter source

[graveljp]

The current specification for canvas filters applies the globalAlpha
on the filter result. The drawing model essentially says:

• Render the shape, creating image A.
• When the current filter is set, use it on image A to create image B.
• Multiply the alpha component of every pixel in B by global alpha.

This leads to a unexpected behavior. When drawing a transparent shape
with a drop-shadow filter, the shadow should be visible through the
transparent foreground. This should be true whether the drawing is made
transparent via fillStyle or via globalAlpha. This is how Chrome and
Firefox behaves. Following the specification to the letter however,
the shadow wouldn't be visible through the foreground.

This PR aligns the specification with Chrome's and Firefox's behavior:

• Render the shape, creating image A.
• Multiply the alpha component of every pixel in A by global alpha,
  creating image B.
• When the current filter is set, use it on image B to create image C.

• At least two implementers are interested (and none opposed):
  • Chrome
  • Firefox
• Tests are written and can be reviewed and commented upon at:
  • https://crrev.com/c/5904448
• Implementation bugs are filed:
  • Chromium: N/A
  • Gecko: N/A
  • WebKit: https://bugs.webkit.org/show_bug.cgi?id=280894
• MDN issue is filed: …
• The top of this comment includes a clear commit message to use.

(See WHATWG Working Mode: Changes for more details.)

---

/canvas.html ( diff )

[domenic]

Editorially LGTM; will give a few more days in case people with more domain expertise from @whatwg/canvas want to review.

Thanks for the great PR description outlining the problem and solution!

[Kaiido]

Just to note, there is a very old interop issue right in this algo regarding when the compositing of the shadow (ctx.shadowXXX) is to be done: https://jsfiddle.net/aw5gr913/ No 2 browsers do the same thing for all modes.

I'm not sure this change would affect that since I guess it's the same to apply the global alpha over the source image and use the new "local" alpha to make the shadow, or to apply the global alpha on the shadowed result, but still, I may miss something and this compositing discrepancy might be problematic here too.

Ps: That'd be https://bugzilla.mozilla.org/show_bug.cgi?id=1072548 for Firefox.

[shallawa]

For WebKit, this change seems correct. Currently WebKit does not behave the correct way. I filed https://bugs.webkit.org/show_bug.cgi?id=280894 to track this issue.