Canvas HDR WTF

README.md

Canvas HDR WTF

view on jsgist

index.css

/*bug-in-github-api-content-can-not-be-empty*/

index.html

<canvas style="zoom: 4;"></canvas>

index.js

/** @type CanvasRenderingContext2D */
const ctx = document.querySelector('canvas').getContext('2d', {
  colorSpace: 'display-p3',
  colorType: 'float16',
});
console.log(JSON.stringify(ctx.getContextAttributes(), null, 2));
ctx.fillStyle = 'color(rec2020 2 2 2)';
ctx.fillRect(10, 30, 30, 40);
ctx.fillStyle = 'color(display-p3 1 0.5 0)';
ctx.fillRect(50, 30, 30, 40);
ctx.fillStyle = 'color(display-p3 2 0.5 0)';
ctx.fillRect(90, 30, 30, 40);
const imgData = ctx.getImageData(0, 0, 21, 20, { pixelFormat: 'rgba-float16' });
for (let i = 0; i < imgData.data.length; ++i) {
  const p = i / 4 | 0;
  const ch = i % 4;
  let v = 1;
  if (ch < 3) {
    v = p % 2 ? 20 : 1;
  }
  imgData.data[i] = v;
}
ctx.putImageData(imgData, 0, 0);
//console.log(imgData.data.constructor.name);

jsGist.json

{"name":"Canvas HDR WTF","settings":{},"filenames":["index.html","index.css","index.js"]}