{"id":14587071,"url":"https://github.com/cmahnke/hdr-canvas","last_synced_at":"2026-01-23T04:46:38.492Z","repository":{"id":246917890,"uuid":"822950325","full_name":"cmahnke/hdr-canvas","owner":"cmahnke","description":null,"archived":false,"fork":false,"pushed_at":"2026-01-20T12:39:11.000Z","size":4177,"stargazers_count":6,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-20T21:34:42.382Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://cmahnke.github.io/hdr-canvas/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cmahnke.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-07-02T06:33:37.000Z","updated_at":"2026-01-20T12:37:56.000Z","dependencies_parsed_at":"2025-11-27T20:03:28.349Z","dependency_job_id":null,"html_url":"https://github.com/cmahnke/hdr-canvas","commit_stats":null,"previous_names":["cmahnke/hdr-canvas"],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/cmahnke/hdr-canvas","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmahnke%2Fhdr-canvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmahnke%2Fhdr-canvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmahnke%2Fhdr-canvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmahnke%2Fhdr-canvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cmahnke","download_url":"https://codeload.github.com/cmahnke/hdr-canvas/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmahnke%2Fhdr-canvas/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28676451,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-23T01:00:35.747Z","status":"ssl_error","status_checked_at":"2026-01-23T01:00:19.529Z","response_time":144,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-08T06:01:13.215Z","updated_at":"2026-01-23T04:46:38.485Z","avatar_url":"https://github.com/cmahnke.png","language":"TypeScript","funding_links":[],"categories":["JavaScript libraries"],"sub_categories":["Issues / feature requests for important tools"],"readme":"# `hdr-canvas`\n\nThis module contains a collection of functions and classes to work with the HDR support for HTML `canvas` elements in chromium based (like Chrome, Edge, Opera and Brave) browsers.\n\nAll changes and a bit of context are part of the [release notes for 0.1.0](docs/release-notes-0.1.0.md).\n\n**This should only be considered as proof of concept or alpha code, don't use it in production environments!**\n\n**Even if the display of HDR images works, the HDR support for the `canvas` element needs the browser flag `enable-experimental-web-platform-features` to be enabled. For example, open chrome://flags#enable-experimental-web-platform-features in Chrome to activate it.**\n\n**Especially operations on the `ImageData` arrays are not optimized, e.g. quite slow.**\n\n# Feature detection\n\nImport the required function(s):\n\n```javascript\nimport { checkHDR, checkHDRCanvas, checkHDRVideo, checkFloat16Array, checkHDRBitDepth } from \"hdr-canvas\";\n```\n\n## Example `checkHDRCanvas()`\n\nThe functions return `true` if HDR is supported, example:\n\n```javascript\nconst canvas = document.getElementById(\"canvas\");\nif (checkHDRCanvas()) {\n  canvas.configureHighDynamicRange({ mode: \"extended\" });\n} else {\n  console.debug(\"hdr not supported\");\n  return;\n}\n```\n\nThis can be useful to add a warning (using the [`fillText()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillText) method) to the canvas if it doesn't support HDR content.\n\n## Example `checkHDRCanvas()`\n\n```javascript\nconst hdrCanvasStatus = document.getElementById(\"hdr-canvas-check\")! as HTMLDivElement;\nif (checkHDRCanvas()) {\n  hdrCanvasStatus.innerText = \"HDR Canvas are supported\";\n  hdrCanvasStatus.style.color = \"green\";\n} else {\n  hdrCanvasStatus.innerText = \"HDR Canvas are not supported\";\n  hdrCanvasStatus.style.color = \"red\";\n}\n```\n\n## Example `checkHDRVideo()`\n\n```javascript\nconst hdrCanvasStatus = document.getElementById(\"hdr-video-check\")! as HTMLDivElement;\nif (checkHDRVideo()) {\n  hdrCanvasStatus.innerText = \"HDR Video is supported\";\n  hdrCanvasStatus.style.color = \"green\";\n} else {\n  hdrCanvasStatus.innerText = \"HDR Video is not supported\";\n  hdrCanvasStatus.style.color = \"red\";\n}\n```\n\n## Example `checkFloat16Array()`\n\n```javascript\nconst float16ArrayStatus = document.getElementById(\"float16array-check\")! as HTMLDivElement;\nif (checkHDRVideo()) {\n  hdrCanvasStatus.innerText = \"Float16Array in Image constructor is supported\";\n  hdrCanvasStatus.style.color = \"green\";\n} else {\n  hdrCanvasStatus.innerText = \"Float16Array in Image constructor is not supported\";\n  hdrCanvasStatus.style.color = \"red\";\n}\n```\n\n## Example `checkHDRBitDepth()`\n\nThis can be used to check if the current screen supports HDR.\n\n```javascript\nsetInterval(() =\u003e {\n  console.log(checkHDRBitDepth());\n}, 500);\n```\n\n# Canvas\n\n**Note: Currently the Chrome flag `enable-experimental-web-platform-features` needs to be enabled to have HDR support for the `canvas` element. You need to tell your visitors about that.**\n\nThe HDR `canvas` support is activated by initializing a canvas context using the following snippet:\n\n```javascript\nconst colorSpace = \"rec2100-hlg\";\ncanvas.configureHighDynamicRange({ mode: \"extended\" });\nconst ctx = canvas.getContext(\"2d\", {\n  colorSpace: colorSpace,\n  colorType: \"float16\"\n  // Use this for Chrome \u003c 133\n  //pixelFormat: \"float16\"\n});\n```\n\n## Canvas setup\n\nThe snippet above is also available as function:\n\n```javascript\nimport { initHDRCanvas } from \"hdr-canvas\";\n```\n\n## Implicit Canvas setup\n\nIt's now also possible to use a HDR enabled Canvas by wrapping the browser internal `getContext()` function, by calling `defaultGetContextHDR()`.\n\n```javascript\nimport { defaultGetContextHDR, checkHDR, checkHDRCanvas } from \"hdr-canvas\";\n\nif (checkHDR() \u0026\u0026 checkHDRCanvas()) {\n  defaultGetContextHDR();\n  console.log(\"Enabled HDR Canvas\");\n}\n```\n\n**Note:** This example wraps the call to `defaultGetContextHDR()` into a check (`checkHDR() \u0026\u0026 checkHDRCanvas()`), because calling the function in a browser that isn't HDR-capable will break every subsequent call to `getContext()`.\n\n## Resetting default HDR canvas\n\nUse the method `resetGetContext()` to undo the changes by `defaultGetContextHDR()`.\n\n```javascript\nimport { resetGetContext } from \"hdr-canvas\";\n\nresetGetContext();\n```\n\n## Importing `Float16Image`\n\nAfterwards one can use [ImageData](https://developer.mozilla.org/en-US/docs/Web/API/ImageData) with a `float16` array, first the `Float16Image` needs to be imported:\n\n```javascript\nimport { Float16Image } from \"hdr-canvas\";\n```\n\n## Example: Loading an image\n\nThis example assumes `image` to be a [HTMLImageElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement) including an existing image.\n\n```javascript\nconst offscreen = new OffscreenCanvas(image.width, image.height);\nconst loadCtx = offscreen.getContext(\"2d\");\nloadCtx.drawImage(image, 0, 0);\nconst imData = loadCtx.getImageData(0, 0, image.width, image.height);\nconsole.log(imData);\n\nvar hdrCanvas = document.createElement(\"canvas\");\nhdrCanvas.width = image.width;\nhdrCanvas.height = image.height;\n\nconst rec210hglImage = Float16Image.fromImageData(imData);\n\nconst ctx = initHDRCanvas(hdrCanvas);\nctx.putImageData(rec210hglImage.getImageData(), 0, 0);\n```\n\n# Three.js WebGPU\n\n**Note**: Make sure to have Three.js added as a dependency.\n\nThis is just a drop-in-replacement for the regular `WebGPURenderer` of Three.js.\n\n```javascript\nimport HDRWebGPURenderer from \"hdr-canvas/three/HDRWebGPURenderer.js\";\n```\n\n**Note:** Starting Three.js 167 the WebGPU renderer is the new default renderer. This has several consequences for the required imports. Use this import instead of the official one and if your using Vite _don't_ provide an import map of resolver alias configuration.\n\n```javascript\nimport * as THREE from \"three/src/Three.js\";\n```\n\nUse it as you'll do with a `WebGPURenderer`.\n\n```javascript\nrenderer = new HDRWebGPURenderer({ canvas: canvas, antialias: true });\n```\n\n## Three.js WebGPU\n\nStarting with R180 the WebGPU supports the `toneMapping` which is the succesor of `colorMetadata`. But currently this is still limited in colorspaces.\n\n## Updating textures\n\nStarting from Three.js version 167 you need to fix imported UHDR Textures, otherwise they will appear black:\n\n```javascript\nmodel = gltf.scene;\nmodel.traverse((element) =\u003e {\n  if (element?.material?.type != undefined) {\n    let targetMaterial = new THREE.MeshBasicMaterial();\n    THREE.MeshBasicMaterial.prototype.copy.call(targetMaterial, element.material);\n    element.material = targetMaterial;\n  }\n});\nscene.add(model);\n```\n\n## Compatibility\n\nThis currently doesn't work with Firefox, due to missing support for HDR and only partial WebGPU support.\nOne can import `WebGPU` and use also a HDR check to guard from errors:\n\n```javascript\nimport WebGPU from \"hdr-canvas/three/WebGPU.js\";\n```\n\nOnly use the provided renderer if the browser supports WebGPU and HDR:\n\n```javascript\nif (WebGPU.isAvailable() \u0026\u0026 checkHDRCanvas()) {\n  renderer = new HDRWebGPURenderer({ canvas: canvas, antialias: true });\n} else {\n  renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });\n}\n```\n\n# Examples\n\n## Bundled examples\n\nSome of the examples above are also part of this repository.\n\n```console\nnpm i\nnpm run dev\n```\n\nOpen This URL in your browser: [http://localhost:5173/](http://localhost:5173/), you can also access them directly from [GitHub](https://cmahnke.github.io/hdr-canvas/).\n\n## Old examples on my blog:\n\nAll examples requires a Chromium based browser (like Chrome, Edge, Opera and Brave) and a HDR-enable monitor.\n\n- [Contrast enhancement for UV images using HDR](https://christianmahnke.de/en/post/hdr-image-analysis/)\n- [HDR IIIF](https://christianmahnke.de/en/post/hdr-iiif/)\n- [Ultraviolet Photogrammetry](https://christianmahnke.de/en/post/uv-photogrammetry/)\n\n---\n\n# TODO\n\nThe following things might be improved:\n\n- [x] Try to detect change of screen for HDR detection - [#107](https://github.com/cmahnke/hdr-canvas/issues/107) - implemented but not documented\n- [ ] Improve speed\n  - [ ] Provide WebWorker\n- [ ] Documentation\n  - [ ] Link to browser HDR support\n  - [ ] Give a overview on current status\n\n# References\n\n## Browser HDR\n\n- [`dynamic-range` Media Query](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/dynamic-range)\n- [HDR Capability Detection](https://github.com/w3c/media-capabilities/blob/main/hdr_explainer.md)\n- [HDR `HTMLCanvasElement`](https://github.com/w3c/ColorWeb-CG/blob/main/hdr_html_canvas_element.md)\n\n### Older\n\n- [Adding support for High Dynamic Range (HDR) imagery to HTML Canvas: a baseline proposal](https://github.com/whatwg/html/issues/9461)\n- [HDR Canvas Example](https://ccameron-chromium.github.io/webgl-examples/canvas-hdr.html)\n\n## Sources\n\nThis section contains different definitions, which can be helpful to impkement HDR related things\n\n- [`CanvasRenderingContext2DSettings` in Chromium](https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/modules/canvas/canvas2d/canvas_rendering_context_2d_settings.idl)\n- [`ImageData` in Chromium](https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/canvas/image_data.idl)\n- [`TypeScript DOM reference`](https://github.com/microsoft/TypeScript-DOM-lib-generator/blob/main/baselines/dom.generated.d.ts)\n\n## Workflow on related changes to web APIs\n\n**This is considered to be experimental**, currently we're waiting for TypeSript to pick up the changes made to the web APIs. See [microsoft/TypeScript-DOM-lib-generator#2107](https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/2107)\n\n### Along the spec\n\n1. Change to the WhatsWG spec - [Issue Tracker](https://github.com/whatwg/html)\n2. Change apporoved\n3. MDN picks up spec change - [Create an issue](https://github.com/mdn/content/issues)\n4. Changes are popagated to the [TypeScript generated DOM library](https://github.com/microsoft/TypeScript-DOM-lib-generator)\n\n### By custom TypeScript types\n\n1. Extend `src/types`, try to extend existing interfaces\n\n## Generating updated TypeScript types\n\nStarting with one of the next monor versions (maybe 0.2.0) the prefered way is to update the browser / DOM types instead of adding our own HDR types. The existing types will continue to exist for now. This change reflects improvements in browser support and should make transitioning to standard base types later on.\n\nThe basic workflow is as follows:\n\n- [Update the definitions](https://github.com/microsoft/TypeScript-DOM-lib-generator?tab=readme-ov-file#contribution-guidelines)\n- Regenerate the types (needs the MDN submodule to be checked out)\n\nTo make this repaetable add patches to this repository:\n\nEdit the types, for example to change existing definitions, see [Update the definitions](https://github.com/microsoft/TypeScript-DOM-lib-generator?tab=readme-ov-file#contribution-guidelines)\n\n```\ncd node_modules/@typescript/dom-lib-generator/\nvi inputfiles/overridingTypes.jsonc\n```\n\nTo generate a patch pmake sure, that the Git submmodule is remove, otherwise `patch-package` will fail.\n\n```\nnode scripts/git-submodules.js -c -d node_modules/@typescript/dom-lib-generator/\nnpx patch-package @typescript/dom-lib-generator\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcmahnke%2Fhdr-canvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcmahnke%2Fhdr-canvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcmahnke%2Fhdr-canvas/lists"}