How To Specify Color Space For Canvas In JavaScript?

What is the default color space used in JS canvas? How can I change the color space used for rendering an HTML canvas element?

Solution 1:

Starting in Chrome version 94, when creating a canvas 2d object, you can now provide an options object argument specifying your desired color space ("srgb" or "display-p3") to use:

let canvas = document.getElementById("myCanvas");
let options = { colorSpace: "display-p3" };
const context = canvas.getContext("2d", options);

Also note that the default color space used for canvas elements is now officially (rather than conventionally and implicitly) sRGB ("srgb").

You can watch the Chrome YouTube announcement and read its feature specification.
As noted in the YouTube video, this feature is going to be available in Firefox and Safari as well.

Related links:

• Canvas color space proposal in GitHub
• HTML color space specification

_{Thanks to isherwood and Kaiido for their comments.}