Color management for 2D canvas
Canvas 2D コンテキストで colorSpace オプションを指定し、sRGB 以外の色空間（display-p3 など）での描画を可能にします。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
api.HTMLCanvasElement.getContext.2d_context.options_colorSpace_parameter | 92 | 92 | | 15.2 | 92 | 15.2 |
基本構文
JAVASCRIPT
const ctx = canvas.getContext('2d', { colorSpace: 'display-p3' });
ctx.fillStyle = 'color(display-p3 1 0 0)';
ctx.fillRect(0, 0, 100, 100);ライブデモ
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.
プレビュー全画面表示
実務での使いどころ
-
Color management for 2D canvas の活用
Canvas 2Dの色空間管理。Display-P3等の広色域に対応。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。