Skip to content
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

Add CanvasColorType, with unorm8 (the default) and float16 support #10951

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add CanvasColorType, with unorm8 (the default) and float16 support #10951

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
Add CanvasColorType, with unorm8 and float16 support 
The default behavior is unorm8, which matches the existing behavior of
all user agents.

The name unorm8 is chosen to match modern APIs which distinguish between
8-bit unsigned normalized and 8-bit unsigned integer (e.g,
VK_FORMAT_R8G8B8A8_UNORM vs VK_FORMAT_R8G8B8A8_UINT in Vulkan,
MTLPixelFormatRGBA8Unorm vs MTLPixelFormatRGBA8Uint in Metal, and
"rgba8unorm" vs "rgba8uint" in WebGPU).

The use of colorType (instead of pixelFormat) is used to avoid the
complexity of selecting channel ordering (BGRA vs RGBA) and interactions
with the alpha parameter (RGB, RGBX, or BGRX potentially being required if
alpha is false).
  • Loading branch information
@ccameron-chromium
ccameron-chromium committed Feb 7, 2025
commit 162f9f3d50ed12e39192e7b001ed1dae39b48c56
42 changes: 39 additions & 3 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65366,12 +65366,15 @@ typedef (<span>HTMLOrSVGImageElement</span> or

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>CanvasColorType</dfn> { "<span data-x="dom-CanvasColorType-unorm8">unorm8</span>", "<span data-x="dom-CanvasColorType-float16">float16</span>" };
ccameron-chromium marked this conversation as resolved.
Show resolved Hide resolved

enum <dfn enum>CanvasFillRule</dfn> { "<span data-x="dom-context-2d-fillRule-nonzero">nonzero</span>", "<span data-x="dom-context-2d-fillRule-evenodd">evenodd</span>" };

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>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 @@ -65820,6 +65823,19 @@ context.fillRect(100,0,50,50); // only this square remains</code></pre>

<hr>

<p>The <code>CanvasColorType</code> enumeration is used to specify the <span
data-x="concept-canvas-color-type">color type</span> of the canvas's backing store.</p>

<p>The "<dfn enum-value for="CanvasColorType"><code
data-x="dom-CanvasColorType-unorm8">unorm8</code></dfn>" value indicates that the type
for all color channels is 8-bit unsigned normalized.</p>

<p>The "<dfn enum-value for="CanvasColorType"><code
data-x="dom-CanvasColorType-float16">float16</code></dfn>" value indicates that the type
for all color channels is 16-bit floating point.</p>

<hr>

<p>The <code>CanvasFillRule</code> enumeration is used to select the <dfn>fill rule</dfn>
algorithm by which to determine if a point is inside or outside a path.</p>

Expand Down Expand Up @@ -65962,6 +65978,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-color-type">color type</dfn> setting of type
<code>CanvasColorType</code>. The <code>CanvasSettings</code> object's <span
data-x="concept-canvas-color-type">color type</span> indicates the data type of the
color and alpha components of the pixels of the <span>output bitmap</span>.</p>

<p>To <dfn data-x="canvas-setting-init-bitmap">initialize a <code>CanvasSettings</code> output
bitmap</dfn>, given a <code>CanvasSettings</code> <var>context</var> and a
<code>CanvasRenderingContext2DSettings</code> <var>settings</var>:</p>
Expand All @@ -65980,6 +66002,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-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>

<li><p>Set <var>context</var>'s <span data-x="concept-canvas-will-read-frequently">will read
frequently</span> to <var>settings</var>["<dfn dict-member
for="CanvasRenderingContext2DSettings"><code
Expand Down Expand Up @@ -71832,6 +71858,16 @@ interface <dfn interface>OffscreenCanvasRenderingContext2D</dfn> {
data-x="dom-canvas-toBlob">toBlob()</code> method to the canvas, given the appropriate dimensions,
has no visible effect beyond, at most, clipping colors of the canvas to a more narrow gamut.</p>

<p>For image types that support multiple bit depths, the serialized image must use the bit depth
that best preserves content of the underlying bitmap.</p>

<p class="example">For example, when serializing a 2D context that has
<span data-x="concept-canvas-color-type">color type</span> of
<span data-x="dom-CanvasColorType-float16">float16</span> to <var>type</var>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note to other reviewers. The use of the variable type here outside of an algorithm looks wrong at first, but all of the paragraphs in this section are specifying requirements on "a serialization of the bitmap as a file" and there are a few other uses of type. It seems OK to leave this style alone I think.

"<code>image/png</code>", the resulting image would have 16 bits per sample.
This serialization will still lose significant detail (all values less than 0.5/65535
would be clamped to 0, and all values greater than 1 would be clamped to 1).</p>

<p>If <var>type</var> is an image format that supports variable quality (such as
"<code>image/jpeg</code>"), <var>quality</var> is given, and <var>type</var> is not
"<code>image/png</code>", then, if <var>quality</var> <span data-x="js-Number">is a Number</span>
Expand Down Expand Up @@ -71971,9 +72007,9 @@ interface <dfn interface>OffscreenCanvasRenderingContext2D</dfn> {
<p>As certain colors can only be represented under premultiplied alpha (for instance, additive
colors), and others can only be represented under non-premultiplied alpha (for instance,
"invisible" colors which hold certain red, green, and blue values even with no opacity); and
division and multiplication on 8-bit integers (which is how canvas's colors are currently stored)
entails a loss of precision, converting between premultiplied and non-premultiplied alpha is a
lossy operation on colors that are not fully opaque.</p>
division and multiplication using finite precision entails a loss of accuracy, converting between
premultiplied and non-premultiplied alpha is a lossy operation on colors that are not fully
opaque.</p>

<p>A <code>CanvasRenderingContext2D</code>'s <span>output bitmap</span> and an
<code>OffscreenCanvasRenderingContext2D</code>'s <span>output bitmap</span> must use premultiplied
Expand Down