Use context2D to convert CSS4 colors to display-p3

observablehq / plot

A concise API for exploratory data visualization implementing a layered grammar of graphics

https://observablehq.com/plot/

ISC License

4.27k stars 174 forks source link

Use context2D to convert CSS4 colors to display-p3 #2145

Open Fil opened 3 weeks ago

Fil commented 3 weeks ago

Since we rely on the browser to parse CSS4, and to create a canvas, we can rely on it to also convert these colors to whatever color space it supports.

Maybe this is a hack—or maybe it's the only correct way.

If it's the correct way, maybe we can apply this technique to also support CSS4 colors in the sRGB color space, instead of relying on d3.rgb.

Fil commented 3 weeks ago

OK now it's fast in both examples (p3 and CSS4 + sRGB). (It is slower than the usual call to d3.rgb when there are more than 256 different colors.)

Fil commented 3 weeks ago

One thing that doesn't work here is the serialization to disk made by our unit tests; you can see the two new SVGs appear black (in this PR's preview on github, as well as on dick for me).

I think it's okay for now, but it means that node-canvas doesn't support CSS4 nor display-p3? Needs a bit more investigation.

Fil commented 3 weeks ago

After investigation:

node-canvas does not support colors expressed as CSS4 strings (e.g. color(display-p3 0 1 0.1) is going to be black)
when a canvas prepared with the display-p3 colorSpace option is serialized to disk, it is binary-identical to a canvas prepared with the sRGB option. I think this means that node-canvas ignores the colorSpace option.