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.
Overview
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 |
Syntax
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.
Why it matters
Explain that color management controls how the canvas maps colors to the display.
Authoring notes
Use color management only when the design system and assets are prepared for it.
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.
Related links
Powered by web-features