hdr-canvas 0.1.2 → 0.2.0

package/dist/index.d.ts

@@ -1,5 +1,3 @@
-import { ColorTypes } from 'colorjs.io';
-
 // See https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts
 /// <reference lib="dom" />
 
@@ -44,7 +42,6 @@ interface CanvasRenderingContext2DHDR extends CanvasRenderingContext2D {}
 declare abstract class HDRImage {
     static DEFAULT_COLORSPACE: HDRPredefinedColorSpace;
     static SDR_MULTIPLIER: number;
-    static COLORSPACES: Record<HDRPredefinedColorSpace, ColorTypes>;
     data: HDRImageDataArray;
     height: number;
     width: number;
@@ -61,21 +58,6 @@ declare abstract class HDRImage {
     clone(): this;
 }
 
-declare class Uint16Image extends HDRImage {
-    data: Uint16Array;
-    colorSpace: HDRPredefinedColorSpace;
-    constructor(width: number, height: number, colorspace?: string);
-    fill(color: number[]): this | undefined;
-    static scaleUint8ToUint16(val: number): number;
-    getImageData(): ImageData | null;
-    static convertPixelToRec2100_hlg(pixel: Uint8ClampedArray): Uint16Array;
-    static convertArrayToRec2100_hlg(data: Uint8ClampedArray): Uint16Array;
-    pixelCallback(fn: HDRImagePixelCallback): void;
-    static fromImageData(imageData: HDRImageData): Uint16Image;
-    static fromURL(url: URL): Promise<Uint16Image | undefined>;
-    setImageData(imageData: HDRImageData): void;
-}
-
 declare class Float16Image extends HDRImage {
     data: Float16Array;
     static DEFAULT_PIXELFORMAT: ImageDataPixelFormat;
@@ -85,7 +67,6 @@ declare class Float16Image extends HDRImage {
     fill(color: number[]): this | undefined;
     static scaleUint8ToFloat16(val: number): number;
     getImageData(): ImageData | null;
-    static convertPixelToRec2100_hlg(pixel: Uint8ClampedArray): Float16Array;
     static convertArrayToRec2100_hlg(data: Uint8ClampedArray): Float16Array;
     pixelCallback(fn: HDRImagePixelCallback): void;
     static fromImageData(imageData: HDRImageData): Float16Image;
@@ -95,11 +76,14 @@ declare class Float16Image extends HDRImage {
     clone(): this;
 }
 
+declare function checkHDRVideo(): boolean;
 declare function checkHDR(): boolean;
 declare function checkHDRCanvas(): boolean;
+declare function checkFloat16Array(): boolean;
+declare function checkHDRBitDepth(): boolean;
 
 declare function initHDRCanvas(canvas: HDRHTMLCanvasElement): CanvasRenderingContext2DHDR | null;
 declare function defaultGetContextHDR(): void;
 declare function resetGetContext(): void;
 
-export { Float16Image, HDRImage, Uint16Image, checkHDR, checkHDRCanvas, defaultGetContextHDR, initHDRCanvas, resetGetContext };
+export { Float16Image, HDRImage, checkFloat16Array, checkHDR, checkHDRBitDepth, checkHDRCanvas, checkHDRVideo, defaultGetContextHDR, initHDRCanvas, resetGetContext };

package/docs/release-notes-0.2.0.md

@@ -0,0 +1,26 @@
+# `hdr-canvas` 0.2.0
+
+# Introduction
+
+The following things have been removed:
+
+- the support for Chrom(e|ium) < 140
+- `Uint16Image`
+- Utils for browser version check.
+- bundled UMD and IIFE builds.
+- `colorjs.io` isn't a direct dependency anymore
+
+Support for Safari started (current target is Safari Technology Preview R232 and later): This requires the feature flag "Canvas Color Types and ImageData Pixel Formats". But this currently doesn't support the `rec2100-hlg` color space.
+
+# Key Changes & New Features
+
+- Check function for Float16Array
+- `Float16Array` support is no handled by [`@petamoriken/float16`](https://www.npmjs.com/package/@petamoriken/float16)
+
+# Removal of [`colorjs.io`](https://colorjs.io/)
+
+Even though `colorjs.io` is quite helpful for color space conversions, it's increases the size of a package considerably. And since there are other packages to handle the `Float16`, the package has been removed. If you need your own conversions, add it to your project:
+
+```
+npm install colorjs.io
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hdr-canvas",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "HDR capable HTML canvas",
   "main": "dist/hdr-canvas.cjs",
   "module": "dist/hdr-canvas.js",
@@ -19,8 +19,6 @@
     "dist/hdr-canvas.js.map",
     "dist/hdr-canvas.min.js",
     "dist/hdr-canvas.min.js.map",
-    "dist/hdr-canvas.umd.js",
-    "dist/hdr-canvas.umd.js.map",
     "dist/index.d.ts",
     "dist/@types",
     "three",
@@ -70,44 +68,42 @@
   },
   "homepage": "https://github.com/cmahnke/hdr-canvas#readme",
   "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@eslint/markdown": "^7.5.1",
+    "@eslint/js": "^10.0.1",
+    "@eslint/markdown": "^8.0.1",
     "@fontsource-utils/scss": "^0.2.2",
     "@fontsource-variable/league-spartan": "^5.2.8",
-    "@napi-rs/canvas": "^0.1.83",
+    "@napi-rs/canvas": "^0.1.97",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-terser": "^1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@types/jsdom": "^27.0.0",
+    "@types/jsdom": "^28.0.1",
     "@types/semver": "^7.7.1",
-    "@types/three": "^0.181.0",
-    "@typescript-eslint/parser": "^8.48.0",
-    "@typescript/lib-dom": "npm:@types/web@^0.0.294",
+    "@types/three": "^0.183.1",
+    "@typescript-eslint/parser": "^8.58.0",
     "better-docs": "^2.7.3",
-    "eslint": "^9.39.1",
+    "eslint": "^10.2.0",
     "file-url": "^4.0.0",
-    "globals": "^16.5.0",
+    "globals": "^17.4.0",
     "jsdoc": "^4.0.5",
-    "jsdom": "^27.2.0",
-    "knip": "^5.70.2",
+    "jsdom": "^29.0.1",
+    "knip": "^6.3.0",
     "pkg-types": "^2.3.0",
-    "prettier": "^3.7.1",
-    "rimraf": "^6.1.2",
-    "rollup": "^4.53.3",
-    "rollup-plugin-dts": "^6.3.0",
-    "sass": "^1.94.2",
-    "semver": "^7.7.3",
-    "stylelint": "^16.26.1",
-    "stylelint-config-standard-scss": "^16.0.0",
-    "three": "^0.181.2",
+    "prettier": "^3.8.1",
+    "rimraf": "^6.1.3",
+    "rollup": "^4.60.1",
+    "rollup-plugin-dts": "^6.4.1",
+    "sass": "^1.99.0",
+    "semver": "^7.7.4",
+    "stylelint": "^17.6.0",
+    "stylelint-config-standard-scss": "^17.0.0",
+    "three": "^0.183.2",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.48.0",
-    "vite": "^7.2.4",
-    "vitest": "^4.0.14"
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.58.0",
+    "vite": "^8.0.3",
+    "vitest": "^4.1.2"
   },
   "dependencies": {
-    "@petamoriken/float16": "^3.9.3",
-    "colorjs.io": "^0.5.2"
+    "@petamoriken/float16": "^3.9.3"
   }
 }

package/rollup.config.mjs

@@ -6,6 +6,9 @@ import terser from "@rollup/plugin-terser";
 // External configs
 import typescriptOptions from "./tsconfig.json" with { type: "json" };
 
+//const tsOptions = Object.assign(typescriptOptions, { rootDir: "src" });
+const tsOptions = typescriptOptions;
+
 const config = [
   {
     input: "src/index.ts",
@@ -14,27 +17,20 @@ const config = [
         file: "dist/hdr-canvas.js",
         format: "es",
         sourcemap: true
-      },
-      {
-        file: "dist/hdr-canvas.umd.js",
-        format: "umd",
-        name: "HDRCanvas",
-        sourcemap: true
       }
     ],
     external: ["three" /*, "colorjs.io" */],
-    plugins: [typescript(typescriptOptions), nodeResolve()]
+    plugins: [typescript(tsOptions), nodeResolve()]
   },
   {
     input: "src/index.ts",
     output: {
       file: "dist/hdr-canvas.min.js",
-      format: "iife",
-      name: "HDRCanvas",
+      format: "es",
       sourcemap: true
     },
     external: ["three"],
-    plugins: [typescript(typescriptOptions), nodeResolve(), terser()]
+    plugins: [typescript(tsOptions), nodeResolve(), terser()]
   },
   {
     input: "src/index.ts",

package/scripts/check-import.sh

@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+
+set -e
+
+cd tests/import
+
+npm cache clean --force
+rm -rf node_modules
+npm i --no-package-lock --prefix ./
+
+npm run build

package/src/Float16Image.ts

@@ -1,7 +1,5 @@
 import { HDRImage } from "./HDRImage";
 
-import Color from "colorjs.io";
-import type { Coords } from "colorjs.io";
 import { f16round } from "@petamoriken/float16";
 
 import type { HDRPredefinedColorSpace, HDRImageData, HDRImagePixelCallback } from "./types/HDRCanvas.d.ts";
@@ -86,38 +84,22 @@ export class Float16Image extends HDRImage {
       return null;
     }
 
-    return new ImageData(this.data as unknown as ImageDataArray, this.width, this.height, {
-      colorSpace: this.colorSpace as PredefinedColorSpace,
-      pixelFormat: this.pixelFormat as ImageDataPixelFormat
-    } as ImageDataSettings) as ImageData;
-  }
-
-  /**
-   * Converts a single 8-bit pixel (from sRGB color space) to a 16-bit pixel
-   * in the `rec2100-hlg` color space.
-   *
-   * @param {Uint8ClampedArray} pixel - An array of four 8-bit numbers (R, G, B, A).
-   * @returns {Float16Array} The converted 16-bit pixel in the `rec2100-hlg` color space.
-   * @deprecated
-   */
-  static convertPixelToRec2100_hlg(pixel: Uint8ClampedArray): Float16Array {
-    const colorJScolorSpace = <string>Float16Image.COLORSPACES["rec2100-hlg" as HDRPredefinedColorSpace];
-
-    const srgbColor = new Color(
-      "srgb",
-      Array.from(pixel.slice(0, 3)).map((band: number) => {
-        return band / 255;
-      }) as Coords,
-      pixel[3] / 255
-    );
-    const rec2100hlgColor = srgbColor.to(colorJScolorSpace);
-    const hlg: Array<number> = rec2100hlgColor.coords.map((band: number) => {
-      return Math.round(band * Float16Image.SDR_MULTIPLIER);
-    });
-    // Readd alpha
-    hlg.push(rec2100hlgColor.alpha * Float16Image.SDR_MULTIPLIER);
+    try {
+      const imageDataSettings = {
+        colorSpace: this.colorSpace as PredefinedColorSpace,
+        pixelFormat: this.pixelFormat as ImageDataPixelFormat
+      };
 
-    return Float16Array.from(hlg);
+      if (Array.isArray(navigator.userAgent.match(/Version\/[\d.]+.*Safari/))) {
+        imageDataSettings["colorSpace"] = "display-p3";
+      }
+      return new ImageData(this.data as unknown as ImageDataArray, this.width, this.height, {
+        ...imageDataSettings
+      } as ImageDataSettings) as ImageData;
+    } catch (e) {
+      console.error("Can't create Float16Array Image data, not supported by the browser", e);
+    }
+    return null;
   }
 
   /**
@@ -147,7 +129,7 @@ export class Float16Image extends HDRImage {
     for (let i = 0; i < this.data.length; i += 4) {
       const pixel = fn(this.data[i], this.data[i + 1], this.data[i + 2], this.data[i + 3]);
 
-      //TODO: Check if we should implicitly should operate on int pixel vaulues
+      //TODO: Check if we should implicitly operate on int pixel values
       /*
       for (let i = 0; i < pixel.length; i++) {
         const normalizedFloat = pixel[i] / 255.0;

package/src/HDRImage.ts

@@ -1,8 +1,6 @@
 //import type { ImageData } from "./types/ImageData.d.ts";
 import type { HDRPredefinedColorSpace, HDRImageData, HDRImageDataArray, HDRImagePixelCallback } from "./types/HDRCanvas.d.ts";
 
-import type { ColorTypes } from "colorjs.io";
-
 export abstract class HDRImage {
   /** The default color space for new images, set to "rec2100-hlg". */
   static DEFAULT_COLORSPACE: HDRPredefinedColorSpace = "rec2100-hlg";
@@ -10,14 +8,6 @@ export abstract class HDRImage {
   /** A multiplier used for scaling 8-bit SDR values to 16-bit. */
   static SDR_MULTIPLIER = 2 ** 16 - 1; //(2**16 - 1)
 
-  /** A mapping of predefined HDR color space names to their corresponding `colorjs.io` string representations. */
-  static COLORSPACES: Record<HDRPredefinedColorSpace, ColorTypes> = {
-    "rec2100-hlg": "rec2100hlg",
-    "display-p3": "p3",
-    srgb: "sRGB",
-    "rec2100-pq": "rec2100pq"
-  };
-
   /** The raw pixel data stored as a `Float16Array`. */
   data: HDRImageDataArray;
   /** The height of the image in pixels. */

package/src/hdr-canvas.ts

@@ -1,5 +1,4 @@
 import { HDRImage } from "./HDRImage";
-import { getBrowserVersion } from "./browser-util";
 
 import type { HDRHTMLCanvasElement, CanvasRenderingContext2DHDRSettings, CanvasRenderingContext2DHDR } from "./types/HDRCanvas.d.ts";
 
@@ -10,19 +9,15 @@ import type { HDRHTMLCanvasElement, CanvasRenderingContext2DHDRSettings, CanvasR
  * @returns {CanvasRenderingContext2DHDRSettings} An options object for creating an HDR canvas context.
  */
 export function getHdrOptions(): CanvasRenderingContext2DHDRSettings {
-  const hdrOptions: CanvasRenderingContext2DHDRSettings = { colorSpace: HDRImage.DEFAULT_COLORSPACE };
-  const browserMajorVersion = getBrowserVersion();
-  if (browserMajorVersion == null) {
-    console.warn(`Unsupported / untested browser (${navigator.userAgent}) detected - using more modern defaults`);
-    hdrOptions["colorType"] = "float16";
-    hdrOptions["toneMapping"] = { mode: "extended" };
-  } else {
-    if (browserMajorVersion < 134) {
-      console.warn("Older Chrome / chromium based browser detected, using older `pixelFormat`");
-    } else {
-      hdrOptions["pixelFormat"] = "float16";
-    }
+  const hdrOptions: CanvasRenderingContext2DHDRSettings = {
+    colorSpace: HDRImage.DEFAULT_COLORSPACE,
+    colorType: "float16",
+    toneMapping: { mode: "extended" }
+  };
+  if (Array.isArray(navigator.userAgent.match(/Version\/[\d.]+.*Safari/))) {
+    hdrOptions["colorSpace"] = "display-p3";
   }
+
   return hdrOptions;
 }
 
@@ -34,10 +29,6 @@ export function getHdrOptions(): CanvasRenderingContext2DHDRSettings {
  * @returns {CanvasRenderingContext2DHDR | null} The 2D rendering context, or `null` if the context cannot be created. Can be cast down to `CanvasRenderingContext2D` or `RenderingContext`
  */
 export function initHDRCanvas(canvas: HDRHTMLCanvasElement): CanvasRenderingContext2DHDR | null {
-  const browserMajorVersion = getBrowserVersion();
-  if (browserMajorVersion !== null && browserMajorVersion < 134) {
-    canvas.configureHighDynamicRange({ mode: "extended" });
-  }
   const ctx = canvas.getContext("2d", getHdrOptions());
   return ctx as CanvasRenderingContext2DHDR;
 }

package/src/hdr-check.ts

@@ -7,8 +7,11 @@ import { getHdrOptions } from "./hdr-canvas";
  */
 export function checkHDRVideo(): boolean {
   try {
-    const dynamicRangeVideoHighMQ: boolean = window.matchMedia("(video-dynamic-range: high)").matches;
-    if (dynamicRangeVideoHighMQ) {
+    const dynamicRangeVideoFirefoxMQ: boolean =
+      navigator.userAgent.toLowerCase().includes("firefox") && window.matchMedia("(video-dynamic-range: high)").matches;
+    // For Safari
+    const dynamicRangeHighMQ: boolean = window.matchMedia("(dynamic-range: high) and (color-gamut: p3)").matches;
+    if (dynamicRangeVideoFirefoxMQ || dynamicRangeHighMQ) {
       return true;
     }
     return false;
@@ -23,21 +26,10 @@ export function checkHDRVideo(): boolean {
  */
 export function checkHDR(): boolean {
   try {
-    const bitsPerChannel: number = screen.colorDepth / 3;
-    const hdrSupported: boolean = bitsPerChannel > 8;
-
-    //TODO: Test if this works as expected
     const dynamicRangeHighMQ: boolean = window.matchMedia("(dynamic-range: high)").matches;
     const colorGamutMQ: boolean = window.matchMedia("(color-gamut: rec2020)").matches || window.matchMedia("(color-gamut: p3)").matches;
     if (colorGamutMQ && dynamicRangeHighMQ) {
-      if (bitsPerChannel !== Math.round(bitsPerChannel)) {
-        // iOS bug
-        return false;
-      } else if (hdrSupported) {
-        return true;
-      } else {
-        return false;
-      }
+      return true;
     }
     return false;
   } catch (e) {
@@ -50,6 +42,9 @@ export function checkHDR(): boolean {
  * @returns {boolean}
  */
 export function checkHDRCanvas(): boolean {
+  if (!checkHDR() || !checkFloat16Array()) {
+    return false;
+  }
   try {
     const canvas: HTMLCanvasElement = document.createElement("canvas");
     if (!canvas.getContext) {
@@ -58,17 +53,39 @@ export function checkHDRCanvas(): boolean {
 
     const options = getHdrOptions();
     const ctx: CanvasRenderingContext2D | null = <CanvasRenderingContext2D>canvas.getContext("2d", options);
-    //canvas.drawingBufferColorSpace = colorSpace;
-    //canvas.unpackColorSpace = colorSpace;
     if (ctx === null) {
       return false;
     }
     return true;
-  } catch {
+  } catch (e) {
     console.error(
-      "Bad canvas ColorSpace test - make sure that the Chromium browser flag 'enable-experimental-web-platform-features' has been enabled"
+      "Bad canvas ColorSpace test - make sure that the Chromium browser flag 'enable-experimental-web-platform-features' has been enabled",
+      e
     );
 
     return false;
   }
+  return false;
+}
+
+/** Check if Float16Array is supported, to be used in {ImageData}
+ * @returns {boolean}
+ */
+export function checkFloat16Array(): boolean {
+  try {
+    new ImageData(new Float16Array(4) as any, 1, 1, { pixelFormat: "rgba-float16" } as any);
+  } catch (e) {
+    console.error("Browser doesn't support Float16Array", e);
+    return false;
+  }
+  return true;
+}
+
+/** Check if the supported bit depth is larger then 8
+ * @returns {boolean}
+ */
+export function checkHDRBitDepth(): boolean {
+  const bitsPerChannel: number = screen.colorDepth / 3;
+  const hdrSupported: boolean = bitsPerChannel > 8;
+  return hdrSupported;
 }

package/src/index.ts

@@ -1,5 +1,4 @@
-export { Uint16Image } from "./Uint16Image";
 export { Float16Image } from "./Float16Image";
 export { HDRImage } from "./HDRImage";
-export { checkHDR, checkHDRCanvas } from "./hdr-check";
+export { checkHDR, checkHDRVideo, checkHDRCanvas, checkFloat16Array, checkHDRBitDepth } from "./hdr-check";
 export { initHDRCanvas, defaultGetContextHDR, resetGetContext } from "./hdr-canvas";

package/three/HDRWebGPUBackend.js

@@ -50,13 +50,22 @@ class HDRWebGPUBackend extends WebGPUBackend {
        * @see {@link https://github.com/ccameron-chromium/webgpu-hdr/blob/main/EXPLAINER.md#example-use | WebGPU HDR Explainer}
        */
 
+      const hdrSettings = {};
+      const dynamicRangeHighMQ = window.matchMedia("(dynamic-range: high)").matches;
+      if (dynamicRangeHighMQ) {
+        hdrSettings["colorSpace"] = "rec2100-hlg";
+        hdrSettings["toneMapping"] = { mode: "extended" };
+      }
+      if (Array.isArray(navigator.userAgent.match(/Version\/[\d.]+.*Safari/))) {
+        delete hdrSettings["colorSpace"];
+      }
+
       context.configure( {
         device: this.device,
         format: this.utils.getPreferredCanvasFormat(),
         usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
         alphaMode: alphaMode,
-        colorSpace: "rec2100-hlg",
-        toneMapping: { mode: "extended" }
+        ...hdrSettings
       } );
 
       canvasData.context = context;

package/tsconfig.json

@@ -15,17 +15,18 @@
     "declaration": true,
     "allowJs": true,
     "skipLibCheck": true,
-    "target": "es2024",
+    "target": "es2025",
+    "rootDir": ".",
     "outDir": "dist",
     "declarationDir": "dist",
     "typeRoots": ["./node_modules/@types"],
-    "lib": ["es2024"],
+    "lib": ["es2025"],
     "paths": {
       "~/hdr-canvas/three/*": ["./three/*"],
       "~/hdr-canvas/*": ["./src/*"],
       "three": ["./node_modules/@types/three"]
     }
   },
-  "include": ["src/**/*", "tests/site/**/*", "tests/*"],
+  "include": ["./src/**/*", "./tests/site/**/*", "./tests/*"],
   "exclude": ["node_modules", "**/*.spec.ts", "three/**/*"]
 }