Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 2 commits into
base: mbostock/raster-color-space
Choose a base branch
from

Conversation

Fil
Copy link
Contributor

@Fil Fil commented Aug 22, 2024

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 Fil mentioned this pull request Aug 22, 2024
* memoize (with some decent limit) for faster renders
* clear rect to guard against semi-transparent color leaks
@Fil
Copy link
Contributor Author

Fil commented Aug 22, 2024

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
Copy link
Contributor Author

Fil commented Aug 22, 2024

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
Copy link
Contributor Author

Fil commented Aug 22, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant