bright-canvas

bright-canvas

Brighten any canvas with proper HDR support. No flags required.

View the demo here!

Sends a source canvas through an WebGPU canvas with extended tone mapping, enabling HDR brightness with minimal setup and no fighting with WebGPU. Falls back to a plain 2D context when WebGPU and/or HDR is not available in the browser.

Supported since Chrome 129 and iOS/Safari 26.

Firefox does not have HDR support for WebGPU canvases yet.

WebGPU will only work in a secure context or on localhost.

Usage

npm install bright-canvas

import { initHdrCanvas } from 'bright-canvas';

// minimal usage
const hdr = await initHdrCanvas(srcCanvas, outCanvas);

// advanced usage
const hdr = await initHdrCanvas(srcCanvas, outCanvas, {
  debug: true,          // log messages to the console
  brightness: 2,        // initial brightness factor
  sourceFloat16: false, // set true if srcCanvas has float16 backing
  alpha: true           // true preserves source transparency
});

hdr.mode;              // 'hdr' | 'sdr'
hdr.setBrightness(v);  // 2 is relatively safe
hdr.render();          // call in frame function after drawing to srcCanvas
hdr.destroy();         // release WebGPU canvas resources

See demo/minimal.html for a minimal example. (web)

Demo

WebGPU + ES modules in this demo require a secure context. When running this repo locally, run local-web-server to serve.

local-web-server serves a self-signed cert by default and will show a warning in browser. Bypass by clicking Show Details/Advanced then Proceed/Visit ...

npx local-web-server --https
# then open to /demo/hdr-2d-canvas-module.html

Development

npm run build

Notes

• Brightness multiplies the color values from the source canvas, but does not increase bit depth with default canvas/bright-canvas options, and may result in muted colors.
• When using canvases with higher bit depths (ex. colorType: 'float16' as 2d canvas option), set sourceFloat16 to true to properly map these values.
  • colorType is only supported in Chrome at the moment.
  • Using in combination with colorSpace: 'display-p3' is recommended.
    • Vibrant colors may only show up on Chrome in MacOS. See demo/minimal-float16.html for a minimal example with float16 and display-p3 colors. (web)
• Call hdr.render() in the same frame you draw to the source canvas.
• Source dimensions are captured at init; resizing the source canvas afterward is not handled yet.

Disclosure

Claude Fable 5 was used to develop bright-canvas.js and demo/example.html with minimal editing. Minimal examples and this README.md were written by me. Supermaven autocomplete was used to help me write README.md and minimal examples faster. WebGPU code was adapted from this webgpu-samples particles demo: https://webgpu.github.io/webgpu-samples/?sample=particles