Skip to content

Commit

Permalink
Apply globalAlpha on the canvas filter source
Browse files Browse the repository at this point in the history
The previous specification for canvas filters applies the globalAlpha on the filter result. The drawing model essentially says:

1. Render the shape, creating image A.
2. When the current filter is set, use it on image A to create image B.
3. 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 Chromium and Gecko behave. Following the specification to the letter however, the shadow wouldn't be visible through the foreground.

Align the standard with Chromium's and Gecko's behavior:

1. Render the shape, creating image A.
2. Multiply the alpha component of every pixel in A by global alpha, creating image B.
3. When the current filter is set, use it on image B to create image C.
  • Loading branch information
graveljp authored Oct 9, 2024
1 parent 3a8303e commit 8a94842
Showing 1 changed file with 3 additions and 6 deletions.
9 changes: 3 additions & 6 deletions source
Original file line number Diff line number Diff line change
Expand Up @@ -70026,6 +70026,9 @@ console.log(pixels.data[2]);
and line styles must be honored, and the stroke must itself also be subjected to the current
transformation matrix.</p></li>

<li><p>Multiply the alpha component of every pixel in <var>A</var> by <code
data-x="concept-canvas-global-alpha">global alpha</code>.</p></li>

<li>
<p>When the <span data-x="concept-canvas-current-filter">current filter</span> is set to a
value other than "<code data-x="">none</code>" and all the externally-defined filters it
Expand All @@ -70041,16 +70044,10 @@ console.log(pixels.data[2]);
<li><p><span>When shadows are drawn</span>, render the shadow from image <var>B</var>,
using the current shadow styles, creating image <var>C</var>.</p></li>

<li><p><span>When shadows are drawn</span>, multiply the alpha component of every pixel in
<var>C</var> by <code data-x="concept-canvas-global-alpha">global alpha</code>.</p></li>

<li><p><span>When shadows are drawn</span>, composite <var>C</var> within the
<span>clipping region</span> over the current <span>output bitmap</span> using the <span>current
compositing and blending operator</span>.</p></li>

<li><p>Multiply the alpha component of every pixel in <var>B</var> by <code
data-x="concept-canvas-global-alpha">global alpha</code>.</p></li>

<li><p>Composite <var>B</var> within the <span>clipping region</span> over the current
<span>output bitmap</span> using the <span>current compositing and blending
operator</span>.</p></li>
Expand Down

0 comments on commit 8a94842

Please sign in to comment.