Supporting gradient interpolation for non-RGB based colour spaces in Canvas 2d

[ElizabethHudnott]

What problem are you trying to solve?

I'd like to be able to fill the shapes I draw using CanvasRenderingContext2D using gradients that interpolate between their colour stops in a colour space other than sRGB or Display P3, for example HSL. This is to avoid the problem where requesting a gradient between two complementary colours results in the dreaded patch of grey murkiness in the middle part of a gradient. My reason for wanting to do this is so that I can produce more interesting artwork.

What solutions exist today?

1. Creating a pre-rendered gradient in a graphics package and saving it as an image file and using it with createPattern(). This only works if the desired colour stops are known before runtime. It also wastes bandwidth downloading an image file.
2. Create another canvas outside of the document that's 1 pixel wide and then set its fillStyle property and invoke fillRect() a large number of times, once for each step of the gradient. Then use the content of that canvas as the input to createPattern(). This would be tricky to do efficiently as it's hard to tell how much you need to increment a variable like saturation by (for example) in order to effect a change of one unit up or down in one of the 8 bit red, green or blue components.
3. Giving up on Canvas 2d and using WebGL or WebGPU to generate 2D graphics. This is a tediously complicated approach to drawing 2D shapes, especially without support from a third-party library. Also, WebGL doesn't include functions like hsl(), lch(), lab(), etc. as built-in functions so these would have to be written by the user or a library author.

Method 2 also only works exactly as described for linear gradients and Method 1 applied as exactly described would result in a much bigger image file size when a radial or conical gradient is needed. However, once you have an image of a linear gradient then you could use getImageData() or a fragment shader to convert the image of a linear gradient into an image of a radial or conical gradient. Method 1 and Method 2 also require calculating an appropriate matrix to use with the setTransform() method of the CanvasPatternobject.

How would you solve it?

I'd add an additional optional parameter to the following functions:

• createLinearGradient()
• createRadialGradient()
• createConicGradient()

This parameter would be a string parameter and it would accept the same values as the <color-interpolation-method> syntax from CSS Color Module Level 4 and above.

Anything else?

No response

[ElizabethHudnott]

Duplicate of #8296. Sorry.