stdlib icon indicating copy to clipboard operation
stdlib copied to clipboard

Pass-through options from DOM.context2d to getContext

Open Fil opened this issue 3 years ago • 4 comments

The third argument to DOM.context2d can be an options object with {scale, colorSpace}, allowing the creation of wide-gamut graphics on supported hardware and software.

Note: this necessitates a try/catch because Safari will throw if the os requirements are not met.

Tests/demo: https://observablehq.com/@fil/colorspace-display-p3-context2d

Draft, mostly for discussion.

Fil avatar Dec 20 '21 14:12 Fil

It's fine to just do nothing. Easy enough to make this helper outside of stlib for special cases. (But it's very useful in general to not have to worry about dpr.)

Fil avatar Dec 20 '21 17:12 Fil

we might want to document the willReadFrequently boolean option as well?

Fil avatar Oct 05 '22 14:10 Fil

I believe the options handling can be simplified:

export default function(width, height, options = {}) {
  const {
    scale = devicePixelRatio,
    ...contextOptions
  } = !isNaN(options) ? {scale: options} : options;
  const canvas = document.createElement("canvas");
  canvas.width = width * scale;
  canvas.height = height * scale;
  canvas.style.width = width + "px";
  const context = canvas.getContext("2d", contextOptions);
  context.scale(scale, scale);
  return context;
}

mootari avatar Oct 05 '22 15:10 mootari

Chrome (>= 111) supports display-p3 https://developer.chrome.com/articles/high-definition-css-color-guide/

Fil avatar Mar 23 '23 08:03 Fil