v155 · canvas color spaces

Context settings

The whole feature is two new strings in one enum. getContext("2d", { colorSpace }) accepts them, and getContextAttributes() tells you what the context actually got. This page runs all four enum values against your browser and prints the verbatim answer — including the TypeError an unsupported value produces.

Ships in Chrome 155. On an older build, the enum values below throw and the matrix says so — that is the honest result, not a failure of the page. To try it early: launch with --enable-blink-features=ColorSpacePredefinedLinearSpaces or --enable-experimental-web-platform-features (Blink flag ColorSpacePredefinedLinearSpaces, no dedicated chrome://flags entry).

The enum matrix

Each enum value passed to a real getContext("2d", { colorSpace }) call in this browser
colorSpace value getContextAttributes().colorSpace verdict
"srgb"—not run yet
"srgb-linear"—not run yet
"display-p3"—not run yet
"display-p3-linear"—not run yet

The readback is the contract: a browser that merely tolerated the string without honouring it would be caught here, because getContextAttributes() must report the space the backing store really uses.

Create one and draw into it

Backing store colour space

A red-to-white gradient plus a 50%-grey bar, drawn with the selected backing store. The same drawing commands produce different stored bytes per space; the browser converts to your display at the end.

Pick a colour space to create a context.

the API

// Chrome 155: two new PredefinedColorSpace values.
const ctx = canvas.getContext("2d", { colorSpace: "srgb-linear" });

// The readback is the proof — never trust the request alone.
ctx.getContextAttributes().colorSpace;   // "srgb-linear"

// Also valid: "display-p3-linear". Unknown values THROW:
canvas.getContext("2d", { colorSpace: "rec2100-linear" });
// TypeError on stable (that value is a separate, experimental feature)

see also