Search code examples
javascripthtmlcanvashtml5-canvascolor-space

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

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

    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.

    Related links:

    Thanks to isherwood and Kaiido for their comments.