Skip to content

Commit

Permalink
Update 2D canvas color serialization
Browse files Browse the repository at this point in the history
Although fillStyle, strokeStyle, and shadowColor setters accepted all kinds of CSS color values, those could not be serialized. Update that by relying on CSS Color for serialization instead, which now has a HTMLCompatible named parameter to preserve compatibility with 2D canvas and <input type=color> for certain colors.

While here, also link the algorithm to be used for color space conversion and correct the reference for 'relative-colorimetric'.

Fixes #8917.
  • Loading branch information
annevk committed Jul 15, 2024
1 parent e7ef381 commit 1ffd5d0
Showing 1 changed file with 25 additions and 42 deletions.
67 changes: 25 additions & 42 deletions source
Original file line number Diff line number Diff line change
Expand Up @@ -3673,8 +3673,10 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li><dfn data-x-href="https://drafts.csswg.org/css-color/#transparent-black">transparent black</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-color/#valdef-color-srgb">'srgb'</dfn> color space</li>
<li><dfn data-x-href="https://drafts.csswg.org/css-color/#valdef-color-display-p3">'display-p3'</dfn> color space</li>
<li><dfn data-x-href="https://drafts.csswg.org/css-color/#valdef-color-profile-rendering-intent-relative-colorimetric">'relative-colorimetric'</dfn> rendering intent</li>
<li><dfn data-x-href="https://drafts.csswg.org/css-color-5/#valdef-color-profile-rendering-intent-relative-colorimetric">'relative-colorimetric'</dfn> rendering intent</li>
<li><dfn id="parsed-as-a-css-color-value" data-x-href="https://drafts.csswg.org/css-color/#parse-a-css-color-value">parse a CSS &lt;color> value</dfn></li>
<li><!--en-GB--><dfn id="serialisation-of-a-color">serialize a CSS &lt;color> value</dfn> and its <dfn>HTMLCompatible</dfn> argument</li>
<li><dfn data-x-href="https://drafts.csswg.org/css-color/#color-conversion">Converting Colors</dfn></li>
</ul>

<p>The following terms are defined in <cite>CSS Images</cite>: <ref>CSSIMAGES</ref></p>
Expand Down Expand Up @@ -65074,9 +65076,8 @@ context.fillRect(100,0,50,50); // only this square remains</code></pre>
data-x="dom-PredefinedColorSpace-display-p3">display-p3</code></dfn>" value indicates the
<span>'display-p3'</span> color space.</p>

<p class="note">Algorithms for converting between color spaces are found in the <a
href="https://drafts.csswg.org/css-color/#predefined">Predefined color spaces</a> section of
<cite>CSS Color</cite>. <ref>CSSCOLOR</ref></p>
<p class="note">The algorithm for converting between color spaces can be found in the
<span>Converting Colors</span> section of <cite>CSS Color</cite>. <ref>CSSCOLOR</ref></p>

<hr>

Expand Down Expand Up @@ -67772,8 +67773,8 @@ try {

<ol>
<li><p>If <span>this</span>'s <span data-x="concept-CanvasFillStrokeStyles-fill-style">fill
style</span> is a CSS color, then return the <span data-x="serialization of a
color">serialization</span> of that color.</p></li>
style</span> is a CSS color, then return the <span data-x="serialize a CSS &lt;color>
value">serialization</span> of that color with <span>HTMLCompatible</span> set to true.</p></li>

<li><p>Return <span>this</span>'s <span data-x="concept-CanvasFillStrokeStyles-fill-style">fill
style</span>.</p></li>
Expand Down Expand Up @@ -67816,8 +67817,8 @@ try {

<ol>
<li><p>If <span>this</span>'s <span data-x="concept-CanvasFillStrokeStyles-stroke-style">stroke
style</span> is a CSS color, then return the <span data-x="serialization of a
color">serialization</span> of that color.</p></li>
style</span> is a CSS color, then return the <span data-x="serialize a CSS &lt;color>
value">serialization</span> of that color with <span>HTMLCompatible</span> set to true.</p></li>

<li><p>Return <span>this</span>'s <span data-x="concept-CanvasFillStrokeStyles-stroke-style">stroke
style</span>.</p></li>
Expand Down Expand Up @@ -67856,26 +67857,6 @@ try {
style</span> to the given value.</p></li>
</ol>

<p>The <!--en-GB--><dfn id="serialisation-of-a-color">serialization of a color</dfn> for a color
value is a string, computed as follows: if it has alpha equal to 1.0, then the string is a
lowercase six-digit hex value, prefixed with a "#" character (U+0023 NUMBER SIGN), with the first
two digits representing the red component, the next two digits representing the green component,
and the last two digits representing the blue component, the digits being <span data-x="ASCII
lower hex digit">ASCII lower hex digits</span>. Otherwise, the color value has alpha less than
1.0, and the string is the color value in the CSS <code data-x="">rgba()</code>
functional-notation format: "<code data-x="">rgba</code>" (U+0072 U+0067 U+0062
U+0061) followed by a U+0028 LEFT PARENTHESIS, a base-ten integer in the range 0-255 representing
the red component (using <span>ASCII digits</span> in the shortest form possible), a literal
U+002C COMMA and U+0020 SPACE, an integer for the green component, a comma and a space, an integer
for the blue component, another comma and space, a U+0030 DIGIT ZERO, if the alpha value is
greater than zero then a U+002E FULL STOP (representing the decimal point), if the alpha value is
greater than zero then one or more <span>ASCII digits</span> representing the fractional part of
the alpha<!-- value with no trailing zeros (implied by next sentence)-->, and finally a U+0029
RIGHT PARENTHESIS. User agents must express the fractional part of the alpha value, if any, with
the level of precision necessary for the alpha value, when reparsed, to be interpreted as the same
alpha value.</p>
<!-- if people complain this is unreadable, expand it into a <dl> with two nested <ol>s -->

</div>

<hr>
Expand Down Expand Up @@ -69745,8 +69726,9 @@ console.log(pixels.data[2]);

<p>The <dfn attribute for="CanvasShadowStyles"><code
data-x="dom-context-2d-shadowColor">shadowColor</code></dfn> getter steps are to return the <span
data-x="serialization of a color">serialization</span> of <span>this</span>'s <span
data-x="concept-CanvasShadowStyles-shadow-color">shadow color</span>.</p>
data-x="serialize a CSS &lt;color> value">serialization</span> of <span>this</span>'s <span
data-x="concept-CanvasShadowStyles-shadow-color">shadow color</span> with
<span>HTMLCompatible</span> set to true.</p>

<p>The <code data-x="dom-context-2d-shadowColor">shadowColor</code> setter steps are:</p>

Expand Down Expand Up @@ -70986,17 +70968,18 @@ interface <dfn interface>OffscreenCanvasRenderingContext2D</dfn> {
backing store. The default backing store color space for all canvas APIs is
<span>'srgb'</span>.</p>

<p>Color space conversion must be applied to the canvas's backing store when rendering the canvas
to the output device. This color space conversion must be identical to the color space conversion
that would be applied to an <code>img</code> element with a color profile that specifies the same
<span data-x="concept-canvas-color-space">color space</span> as the canvas's backing store.</p>
<p><span data-x="Converting Colors">Color space conversion</span> must be applied to the canvas's
backing store when rendering the canvas to the output device. This color space conversion must be
identical to the color space conversion that would be applied to an <code>img</code> element with
a color profile that specifies the same <span data-x="concept-canvas-color-space">color
space</span> as the canvas's backing store.</p>

<p>When drawing content to a 2D context, all inputs must be converted to the <span
data-x="concept-canvas-color-space">context's color space</span> before drawing. Interpolation of
gradient color stops must be performed on color values after conversion to the <span
data-x="concept-canvas-color-space">context's color space</span>. Alpha blending must be performed
on values after conversion to the <span data-x="concept-canvas-color-space">context's color
space</span>.</p>
<p>When drawing content to a 2D context, all inputs must be <span data-x="Converting
Colors">converted</span> to the <span data-x="concept-canvas-color-space">context's color
space</span> before drawing. Interpolation of gradient color stops must be performed on color
values after conversion to the <span data-x="concept-canvas-color-space">context's color
space</span>. Alpha blending must be performed on values after conversion to the <span
data-x="concept-canvas-color-space">context's color space</span>.</p>

<p class="note">There do not exist any inputs to a 2D context for which the color space is
undefined. The color space for CSS colors is defined in <cite>CSS Color</cite>. The color space
Expand Down Expand Up @@ -71045,8 +71028,8 @@ interface <dfn interface>OffscreenCanvasRenderingContext2D</dfn> {

<p>For image types that support color profiles, the serialized image must include a color profile
indicating the color space of the underlying bitmap. For image types that do not support color
profiles, the serialized image must be converted to the <span>'srgb'</span> color space using
<span>'relative-colorimetric'</span> rendering intent.</p>
profiles, the serialized image must be <span data-x="Converting Colors">converted</span> to the
<span>'srgb'</span> color space using <span>'relative-colorimetric'</span> rendering intent.</p>

<p class="note">Thus, in the 2D context, calling the <code
data-x="dom-context-2d-drawImage">drawImage()</code> method to render the output of the <code
Expand Down

0 comments on commit 1ffd5d0

Please sign in to comment.