如何在JavaScript中为HTML canvas指定渲染使用的颜色空间

1. JS Canvas 默认使用的颜色空间是什么？ #

所有未手动配置的 Canvas 实例，默认统一使用 sRGB 颜色空间。
这个规则同时适用于 2D 渲染上下文和 WebGL 上下文：无论是写入颜色值、渲染图形，还是通过 getImageData 读取像素值，默认的编码、解码逻辑都遵循 sRGB 的伽马校正规则，不会直接使用线性 RGB 值。

2. 如何修改 HTML Canvas 元素渲染时采用的颜色空间？ #

目前仅 2D 渲染上下文支持显式指定颜色空间，需要在初始化上下文的时候通过参数声明，上下文创建完成后无法再修改颜色空间配置。
示例代码如下：

// 初始化时指定使用 P3 广色域颜色空间
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d', {
  colorSpace: 'display-p3'
})

当前标准支持的 colorSpace 取值有两类：

• srgb：默认值，标准 sRGB 颜色空间
• display-p3：广色域 P3 颜色空间，色域覆盖范围比 sRGB 大 25% 左右，适配现在的广色域显示设备

补充说明：

• 颜色空间配置会影响所有 2D 上下文的操作逻辑，包括颜色值解析、图像绘制时的色彩映射、像素读写的编码规则
• 如果使用 WebGL 上下文，需要通过 WebGL 自有扩展（如 EXT_sRGB）来配置颜色空间，不适用上述 2D 上下文的配置方式

内容的提问来源于stack exchange，提问作者Mahozad