Color management for 2D canvas

概要

Canvas 2D コンテキストで colorSpace オプションを指定し、sRGB 以外の色空間（display-p3 など）での描画を可能にします。

対応ブラウザ

基本構文

const ctx = canvas.getContext('2d', { colorSpace: 'display-p3' });
ctx.fillStyle = 'color(display-p3 1 0 0)';
ctx.fillRect(0, 0, 100, 100);

実務での使いどころ

• Color management for 2D canvas の活用

  Canvas 2Dの色空間管理。Display-P3等の広色域に対応。

注意点

アクセシビリティ

• スクリーンリーダーでの読み上げを確認すること。

参考リンク

• MDN Web Docs — Color management for 2D canvas