v155 · canvas color spaces

ImageData round trip

An ImageData carries a colorSpace, and getImageData(x, y, w, h, { colorSpace }) converts pixels into whichever space you ask for. Chrome 155 adds "srgb-linear" and "display-p3-linear" to both ends of that pipe. Pick a colour, draw it once, and read the same pixel back in every space — the bytes tell you what each encoding actually stores.

Ships in Chrome 155. The srgb ↔ display-p3 rows work in any Chrome since 94, so the conversion machinery is exercisable here regardless; the two linear rows report their real result — value or TypeError. Early access: --enable-blink-features=ColorSpacePredefinedLinearSpaces.

One pixel, four encodings

The same drawn pixel, read back with getImageData(…, { colorSpace })
requested colorSpace ImageData.colorSpace pixel bytes [r, g, b, a] verdict

Constructing tagged pixels

new ImageData(w, h, { colorSpace }) is the other direction: you supply bytes and declare what space they are in, and putImageData() composes them correctly onto any canvas. The button constructs one per space and reads the colorSpace property back.

new ImageData(1, 1, { colorSpace }) in this browser
requested imageData.colorSpace verdict
not run yet

the API

// Tag pixels you construct:
const linear = new ImageData(width, height, { colorSpace: "srgb-linear" });
linear.colorSpace;                     // "srgb-linear"

// Convert pixels you read — the browser does the math:
const ctx = canvas.getContext("2d");   // an ordinary srgb canvas
const px = ctx.getImageData(0, 0, 1, 1, { colorSpace: "display-p3-linear" });
px.colorSpace;                         // "display-p3-linear"

see also