Color management for 2D canvas
The optional colorSpace parameter of a 2D canvas's getContext() method chooses the color representation, such as "srgb" or "display-p3". It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
api.HTMLCanvasElement.getContext.2d_context.options_colorSpace_parameter | 92 | 92 | | 15.2 | 92 | 15.2 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
JAVASCRIPT
const ctx = canvas.getContext('2d', { colorSpace: 'display-p3' });
ctx.fillStyle = 'color(display-p3 1 0 0)';
ctx.fillRect(0, 0, 100, 100);Live demo
Canvas color spaces
Compare the common color space options exposed by canvas color management.
PreviewFullscreen
Why it matters
Explain that color management controls how the canvas maps colors to the display.
PreviewFullscreen
Authoring notes
Use color management only when the design system and assets are prepared for it.
PreviewFullscreen
Use cases
-
Draw custom visuals
Use Color management for 2D canvas when browser rendering surfaces need more control for charts, media, or interactive graphics.
-
Support advanced rendering
Apply Color management for 2D canvas where GPU-backed or low-level drawing improves the experience.
Cautions
- Test Color management for 2D canvas in your target browsers and input environments before depending on it as a primary behavior.
- Provide a fallback path or acceptable degradation strategy when support is still limited.
Accessibility
- Make sure Color management for 2D canvas supports the intended task without making the page harder to perceive, understand, or operate.