plot icon indicating copy to clipboard operation
plot copied to clipboard

Use context2D to convert CSS4 colors to display-p3

Open Fil opened this issue 1 year ago • 3 comments

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 avatar Aug 22 '24 11:08 Fil

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 avatar Aug 22 '24 13:08 Fil

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 avatar Aug 22 '24 13:08 Fil

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.

Fil avatar Aug 22 '24 14:08 Fil