Draw Uint8Array Display-P3 RGBA data to canvas

bitmap-display-p3.js

import {
  ChunkType,
  ColorType,
  colorTypeToChannels,
  encode,
  encode_iCCP,
} from "png-tools";
import { deflate } from "pako";

...

const outProfileBuffer = await (await fetch(DISPLAY_P3_ICC_URL)).arrayBuffer();
const outProfileCompressed = deflate(outProfileBuffer);
const iCCP = {
  type: ChunkType.iCCP,
  data: encode_iCCP({ name: "Display P3", data: outProfileCompressed }),
};

const png = encode(
  {
    data: rgba,
    depth: 8,
    colorType: ColorType.RGBA,
    width,
    height,
    ancillary: [iCCP],
  },
  deflate,
  { level: 3 }
);

const bitmap = await createImageBitmap(
  new Blob([png], { type: "image/png" })
);

// draw to canvas
context.drawImage(bitmap, 0, 0);