Skip to content

[Not for review yet] Add CanvasToneMapping to CanvasSettings #11734

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

[Not for review yet] Add CanvasToneMapping to CanvasSettings #11734

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
68b51fc
Add tone mapping enum
ccameron-chromium Oct 1, 2025
2d83fbe
Add settings and attributes
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
88 changes: 86 additions & 2 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68907,6 +68907,7 @@ dictionary <dfn dictionary>CanvasRenderingContext2DSettings</dfn> {
boolean <span data-x="dom-CanvasRenderingContext2DSettings-alpha">alpha</span> = true;
boolean <span data-x="dom-CanvasRenderingContext2DSettings-desynchronized">desynchronized</span> = false;
<span>PredefinedColorSpace</span> <span data-x="dom-CanvasRenderingContext2DSettings-colorSpace">colorSpace</span> = "<span data-x="dom-PredefinedColorSpace-srgb">srgb</span>";
<span>CanvasToneMapping</span> <span data-x="dom-CanvasRenderingContext2DSettings-toneMapping">toneMapping</span> = {};
<span>CanvasColorType</span> <span data-x="dom-CanvasRenderingContext2DSettings-colorType">colorType</span> = "<span data-x="dom-CanvasColorType-unorm8">unorm8</span>";
boolean <span data-x="dom-CanvasRenderingContext2DSettings-willReadFrequently">willReadFrequently</span> = false;
};
Expand Down Expand Up @@ -69167,7 +69168,7 @@ interface <dfn interface>Path2D</dfn> {
objects.</p>

<dl class="domintro">
<dt><code data-x=""><var>context</var> = <var>canvas</var>.<span data-x="dom-canvas-getContext">getContext</span>('2d' [, { [ <span data-x="dom-CanvasRenderingContext2DSettings-alpha">alpha</span>: true ] [, <span data-x="dom-CanvasRenderingContext2DSettings-desynchronized">desynchronized</span>: false ] [, <span data-x="dom-CanvasRenderingContext2DSettings-colorSpace">colorSpace</span>: 'srgb'] [, <span data-x="dom-CanvasRenderingContext2DSettings-willReadFrequently">willReadFrequently</span>: false ]} ])</code></dt>
<dt><code data-x=""><var>context</var> = <var>canvas</var>.<span data-x="dom-canvas-getContext">getContext</span>('2d' [, { [ <span data-x="dom-CanvasRenderingContext2DSettings-alpha">alpha</span>: true ] [, <span data-x="dom-CanvasRenderingContext2DSettings-desynchronized">desynchronized</span>: false ] [, <span data-x="dom-CanvasRenderingContext2DSettings-colorSpace">colorSpace</span>: 'srgb'] [, <span data-x="dom-CanvasRenderingContext2DSettings-toneMapping">toneMapping</span>: {}] [, <span data-x="dom-CanvasRenderingContext2DSettings-willReadFrequently">willReadFrequently</span>: false ]} ])</code></dt>
<dd>
<p>Returns a <code>CanvasRenderingContext2D</code> object that is permanently bound to a
particular <code>canvas</code> element.</p>
Expand All @@ -69184,6 +69185,10 @@ interface <dfn interface>Path2D</dfn> {
specifies the <span data-x="concept-canvas-color-space">color space</span> of the rendering
context.</p>

<p>The <code data-x="dom-CanvasRenderingContext2DSettings-toneMapping">toneMapping</code> member
specifies the <span data-x="concept-canvas-tone-mapping">tone mapping</span> of the rendering
context.</p>

<p>The <code data-x="dom-CanvasRenderingContext2DSettings-colorType">colorType</code> member
specifies the <span data-x="concept-canvas-color-type">color type</span> of the rendering
context.</p>
Expand Down Expand Up @@ -69212,6 +69217,10 @@ interface <dfn interface>Path2D</dfn> {
a string indicating the context's <span data-x="concept-canvas-color-space">color
space</span>.</li>

<li><code data-x="dom-CanvasRenderingContext2DSettings-toneMapping">toneMapping</code> member is
a dictionary indicating the context's <span data-x="concept-canvas-color-space">tone mapping
behavior</span>.</li>

<li><code data-x="dom-CanvasRenderingContext2DSettings-colorType">colorType</code> member is
a string indicating the context's <span data-x="concept-canvas-color-type">color
type</span>.</li>
Expand Down Expand Up @@ -69496,6 +69505,12 @@ context.fillRect(100,0,50,50); // only this square remains</code></pre>
data-x="concept-canvas-color-space">color space</span> indicates the color space for the
<span>output bitmap</span>.</p>

<p>The <code>CanvasSettings</code> object also has a <dfn
data-x="concept-canvas-tone-mapping">tone mapping</dfn> setting of type
<code>CanvasToneMapping</code>. The <code>CanvasSettings</code> object's <span
data-x="concept-canvas-tone-mapping">tone mapping</span> indicates the tone mapping behavior
of the <span>output bitmap</span>.</p>

<p>The <code>CanvasSettings</code> object also has a <dfn
data-x="concept-canvas-color-type">color type</dfn> setting of type
<code>CanvasColorType</code>. The <code>CanvasSettings</code> object's <span
Expand All @@ -69521,6 +69536,10 @@ context.fillRect(100,0,50,50); // only this square remains</code></pre>
<var>settings</var>["<dfn dict-member for="CanvasRenderingContext2DSettings"><code
data-x="dom-CanvasRenderingContext2DSettings-colorSpace">colorSpace</code></dfn>"].</p></li>

<li><p>Set <var>context</var>'s <span data-x="concept-canvas-tone-mapping">tone mapping</span> to
<var>settings</var>["<dfn dict-member for="CanvasRenderingContext2DSettings"><code
data-x="dom-CanvasRenderingContext2DSettings-toneMapping">toneMapping</code></dfn>"].</p></li>

<li><p>Set <var>context</var>'s <span data-x="concept-canvas-color-type">color type</span> to
<var>settings</var>["<dfn dict-member for="CanvasRenderingContext2DSettings"><code
data-x="dom-CanvasRenderingContext2DSettings-colorType">colorType</code></dfn>"].</p></li>
Expand All @@ -69541,6 +69560,8 @@ context.fillRect(100,0,50,50); // only this square remains</code></pre>
<span>this</span>'s <span data-x="concept-canvas-desynchronized">desynchronized</span>, "<code
data-x="dom-CanvasRenderingContext2DSettings-colorSpace">colorSpace</code>" → <span>this</span>'s
<span data-x="concept-canvas-color-space">color space</span>, "<code
data-x="dom-CanvasRenderingContext2DSettings-toneMapping">toneMapping</code>" → <span>this</span>'s
<span data-x="concept-canvas-tone-mapping">tone mapping</span>, "<code
data-x="dom-CanvasRenderingContext2DSettings-colorType">colorType</code>" → <span>this</span>'s
<span data-x="concept-canvas-color-type">color type</span>, "<code
data-x="dom-CanvasRenderingContext2DSettings-willReadFrequently">willReadFrequently</code>" →
Expand Down Expand Up @@ -75526,7 +75547,19 @@ interface <dfn interface>OffscreenCanvasRenderingContext2D</dfn> {
<!--en-GB--><h5 id="colour-spaces-and-colour-correction">Color spaces and color space
conversion</h5>

<pre><code class="idl">enum <dfn enum>PredefinedColorSpace</dfn> { "<span data-x="dom-PredefinedColorSpace-srgb">srgb</span>", "<span data-x="dom-PredefinedColorSpace-display-p3">display-p3</span>" };</code></pre>
<pre><code class="idl">enum <dfn enum>PredefinedColorSpace</dfn> {
"<span data-x="dom-PredefinedColorSpace-srgb">srgb</span>",
"<span data-x="dom-PredefinedColorSpace-display-p3">display-p3</span>"
};

enum <dfn enum>CanvasToneMappingMode</dfn> {
"<span data-x="dom-CanvasToneMappingMode-standard">standard</span>",
"<span data-x="dom-CanvasToneMappingMode-extended">extended</span>",
};

dictionary <dfn dictionary>CanvasToneMapping</dfn> {
<span>CanvasToneMappingMode</span> mode = "<span data-x="dom-CanvasToneMappingMode-standard">standard</span>";
};</code></pre>

<p>The <code>PredefinedColorSpace</code> enumeration is used to specify the <span
data-x="concept-canvas-color-space">color space</span> of the canvas's backing store.</p>
Expand All @@ -75539,6 +75572,57 @@ interface <dfn interface>OffscreenCanvasRenderingContext2D</dfn> {
data-x="dom-PredefinedColorSpace-display-p3">display-p3</code></dfn>" value indicates the
<span>'display-p3'</span> color space.</p>

<p>The <code>CanvasToneMappingMode</code> enumeration specifies the tone mapping
to perform when rendering the context's <span>output bitmap</span> to the screen.</p>

<p>The "<dfn enum-value for="CanvasToneMappingMode"><code
data-x="dom-CanvasToneMappingMode-standard">standard</code></dfn>" value indicates that
color values within the standard dynamic range of the screen shall be unchanged, and
all other color values shall be projected to the standard dynamic range of the screen.</p>

<p class="note">This projection is often accomplished by clamping color values in the color
space of the screen to the [0, 1] interval.</p>

<div class="example">
<p>Suppose that the value (1.035, -0.175, -0.140) is written to an <span>output bitmap</span>
with color space <span>'srgb'</span>.</p>

<p>If this is presented to a screen that natively uses the <span>'srgb'</span> color space, then
this value will be converted to <span>'srgb'</span> (which is a no-op), then projected to the
[0, 1] cubed volume in that space. Using component-wise clamping, this would result in the
<span>'srgb'</span> value (1.0, 0.0, 0.0).</p>

<p>If this is presented to a screen that natively uses the <span>'display-p3'</span> color space,
then this will be converted to the value (0.948, 0.106, 0.01) in the <span>'display-p3'</span>
color space, and no clamping will be needed.</p>
</div>

<p>The "<dfn enum-value for="CanvasToneMappingMode"><code
data-x="dom-CanvasToneMappingMode-extended">extended</code></dfn>" value indicates that
color values within the extended dynamic range of the screen shall be unchanged, and
all other color values shall be projected to the extended dynamic range of the screen.</p>

<p class="note">This projection is often accomplished by clamping color values in the color
space of the screen to the interval of values that the screen is capable of displaying,
which can include values greater than 1.</p>

<div class="example">
<p>Suppose that the value (2.5, -0.15, -0.15) is written to an <span>output bitmap</span>
with color space <span>'srgb'</span>.</p>

<p>If this is presented to a screen that natively uses the <span>'srgb'</span> color space and
is capable of displaying values in the [0, 4] interval in that color space, then this value will be
converted to <span>'srgb'</span> (which is a no-op), then projected to the [0, 4] cubed volume in
that space. Using component-wise clamping, this would result in the <span>'srgb'</span> value
(2.5, 0.0, 0.0).</p>

<p>If this is presented to a screen that natively uses the <span>'display-p3'</span> color space
and is capable of displaying values in the [0, 2] interval in that color space, then this value
will be converted to the value (2.3, 0.545, 0.01) in the <span>'display-p3'</span> color space,
and then projected to the [0, 2] cubed volume in that space. Using component-wise clamping, this
would result in the <span>'display-p3'</span> value (2.0, 0.545, 0.386).</p>
</div>

<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.</p>

Expand Down