Canvas.hdr.js
A custom HTML5 <canvas> rendering context that provides HDR color support (32-bit float per channel) and other features like Blending Modes, Levels, and more.
Install / Use
/learn @brianreavis/Canvas.hdr.jsREADME
canvas.hdr.js
Custom HTML5 Canvas Render Context
Because premultiplied 8-bit color isn't enough! This project provides a "hdr2d" canvas render context—which internally represents colors using 32-bit float per channel. Furthermore, it provides a variety of features useful for art that the traditional "2d" context does not: blending modes, levels, and more.
Usage
var canvas = document.createElement('canvas');
canvas.width = 100;
canvas.height = 100;
document.body.appendChild(canvas);
var context = canvas.getContext('hdr2d');
// draw like you normally would with canvas!
Features
Blending Modes
To activate a particular mode, set the context's globalBlendMode property:
context.globalBlendMode = HDR2D_BLEND_ADD;
Descriptions from SVG Compositing Specification.
Levels
Channel levels can be adjusted individually through the range property. Because colors aren't clamped like they are with "2d", the levels don't necessarily need to be 0–255. Note: modifying the levels will not modify your pixel data; it will only affect how it is rendered.
context.range = {
r: {low: 0, high: 255},
g: {low: 0, high: 255},
b: {low: 0, high: 255},
a: {low: 0, high: 255}
};
Once you have modified the levels, refresh the display:
context.invalidate();
Direct Pixel Buffer Access
Unlike the traditional "2d" context, "hdr2d" exposes the raw pixel buffer as context.imageData (no need to call getImageData()). After you have modified the buffer, make sure to call context.invalidate() to refresh the canvas.
Public Properties / Methods
context.range
An object containing output display levels (by channel). See Levels.
context.globalAlpha
A 0.0–1.0 alpha channel multiplier applied to drawing operations.
context.globalBlendMode
The blending mode used in drawing operations. See Blending Modes.
context.fillStyle
The color used by fillRect(). Valid formats: #000000, #000 (shorthand), rgba(0,0,0,0.5), rgba(0,0,0), hsl(20,100%,100%), hsla(20, 100%,100%,0.5). See [fillStyle] for more information.
context.getPixel(x, y)
Returns an object containing r, g, b, and a color components.
context.setPixel(x, y, color)
Composites the color at (x, y). The color argument should be an object containing r, g, b, and a color components.
context.fillRect(x, y, width, height)
Draws a rectangle at (x, y). To set the color, set fillStyle.
context.clearRect(x, y, width, height)
Resets the pixels in the given region to (0, 0, 0, 0).
context.drawImage(img, x, y, width, height)
Composites the image at (x, y). This method complies with the [drawImage() specification](http
Related Skills
openhue
354.3kControl Philips Hue lights and scenes via the OpenHue CLI.
sag
354.3kElevenLabs text-to-speech with mac-style say UX.
weather
354.3kGet current weather and forecasts via wttr.in or Open-Meteo
casdoor
13.3kAn open-source AI-first Identity and Access Management (IAM) /AI MCP & agent gateway and auth server with web UI supporting OpenClaw, MCP, OAuth, OIDC, SAML, CAS, LDAP, SCIM, WebAuthn, TOTP, MFA, Face ID, Google Workspace, Azure AD
