demo · v137

Canvas Floating Point Color

A 2D canvas can now request a floating-point backing store (float16) — required for HDR pipelines and high-precision compositing. The two canvases below render the same sub-1 gradient. The 8-bit one bands; the float16 one preserves the steps.

probing…

unorm8 (default)

—

float16

—

the code

const ctx = canvas.getContext("2d", {
  colorSpace: "display-p3",
  pixelFormat: "float16",   // NEW
});
const img = new ImageData(256, 64, { pixelFormat: "float16" });
// Fill img.data (Float16Array) with sub-1.0 luminance values.
ctx.putImageData(img, 0, 0);

see also