Skip to content

[FYI, not ready for review] Add globalHDRHeadroom to CanvasCompositing interface #11597

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

[FYI, not ready for review] Add globalHDRHeadroom to CanvasCompositing interface #11597

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
396add9
Add more references
ccameron-chromium Aug 26, 2025
6c0cf53
Rebase and update
ccameron-chromium Oct 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3773,6 +3773,9 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<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-5/#valdef-color-profile-rendering-intent-relative-colorimetric">'relative-colorimetric'</dfn> rendering intent</li>
<li><dfn data-x-href="https://drafts.csswg.org/css-color-hdr/#introducing-headroom">HDR headroom</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-color-hdr/#high-dynamic-range">high dynamic range</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-color-hdr/#standard-dynamic-range">standard dynamic range</dfn></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" data-x-href="https://drafts.csswg.org/css-color/#serializing-color-values">serialize a CSS &lt;color> value</dfn> including <dfn data-x-href="https://drafts.csswg.org/css-color/#color-serialization-html-compatible-serialization-is-requested">HTML-compatible serialization is requested</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-color/#color-conversion">Converting Colors</dfn></li>
Expand Down Expand Up @@ -68971,6 +68974,7 @@ interface mixin <dfn interface>CanvasCompositing</dfn> {
// compositing
attribute unrestricted double <span data-x="dom-context-2d-globalAlpha">globalAlpha</span>; // (default 1.0)
attribute DOMString <span data-x="dom-context-2d-globalCompositeOperation">globalCompositeOperation</span>; // (default "source-over")
attribute unrestricted double <span data-x="dom-context-2d-globalHDRHeadroom">globalHDRHeadroom</span>; // (default 0.0)
};

interface mixin <dfn interface>CanvasImageSmoothing</dfn> {
Expand Down Expand Up @@ -74119,6 +74123,26 @@ console.log(pixels.data[2]);
</ol>
</div>

<p>The <dfn data-x="concept-canvas-global-hdr-headroom">global HDR headroom</dfn> value gives a
<span>HDR headroom</span> parameter that is used for tone mapping all images and colors before
they are composited onto the <span>output bitmap</span>. The value ranges from 0.0 (tone mapping
to the appearance on a <span>standard dynamic range</span> display) to Infinity (tone mapping to
the brightest possible <span>high dynamic range</span> display for which the input is specified).
It must initially have the value 0.0.</p>

<p>The <dfn attribute for="CanvasCompositing"><code
data-x="dom-context-2d-globalHDRHeadroom">globalHDRHeadroom</code></dfn> getter steps are to return
<span>this</span>'s <span data-x="concept-canvas-global-hdr-headroom">global HDR headroom</span>.</p>

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

<ol>
<li><p>If the given value is either NaN, or less than 0.0, then return.</p></li>

<li><p>Otherwise, set <span>this</span>'s <span data-x="concept-canvas-global-hdr-headroom">global
HDR headroom</span> to the given value.</p></li>
</ol>

</div>


Expand Down Expand Up @@ -74446,6 +74470,16 @@ 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>Tone map the image <var>A</var> to the <span
data-x="concept-canvas-global-hdr-headroom">context's global HDR headroom</span>.

<p class="note">The tone mapping to be performed is defined by the input content itself.
Examples include <a href="https://drafts.csswg.org/css-color-hdr/#headroom-interpolation">CSS
HDR color</a>, <ref>ISO21496</ref> gain map images, and <ref>ADGC</ref> gain curve color
profiles.</p>
</li>

<li>
<p>Convert the image <var>A</var> to the <span data-x="concept-canvas-color-space">context's
color space</span>.</p>
Expand Down Expand Up @@ -155083,6 +155117,9 @@ INSERT INTERFACES HERE
<dt id="refsABOUT">[ABOUT]</dt>
<dd><cite><a href="https://www.rfc-editor.org/rfc/rfc6694">The 'about' URI scheme</a></cite>, S. Moonesamy. IETF.</dd>

<dt id="refsADGC">[ADGC]</dt>
<dd><cite><a href="https://www.color.org/specification/ICC.1_Adaptive_Gain_Curve.pdf">Adaptive Gain Curve Tag (ADGC)</a></cite>. International Color Consortium.</dd>

<dt id="refsAPNG">[APNG]</dt>
<dd>(Non-normative) <cite><a href="https://wiki.mozilla.org/APNG_Specification">APNG Specification</a></cite>. S. Parmenter, V. Vukicevic, A. Smith. Mozilla.</dd>

Expand Down Expand Up @@ -155367,6 +155404,9 @@ INSERT INTERFACES HERE
<dt id="refsRESIZEOBSERVER">[RESIZEOBSERVER]</dt>
<dd><cite><a href="https://drafts.csswg.org/resize-observer-1/">Resize Observer</a></cite>, O. Brufau, E. Álvarez. W3C.</dd>

<dt id="refsISO21496">[ISO21496]</dt>
<dd><cite><a href="https://www.iso.org/standard/86775.html">ISO 21496-1: Digital photography — Gain map metadata for image conversion Part 1: Dynamic range conversion</a></cite>. ISO.</dd>

<dt id="refsISO3166">[ISO3166]</dt>
<dd><cite><a href="https://www.iso.org/iso-3166-country-codes.html">ISO 3166: Codes for the representation of names of countries and their subdivisions</a></cite>. ISO.</dd>

Expand Down