stdlib
stdlib copied to clipboard
Pass-through options from DOM.context2d to getContext
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.
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.)
we might want to document the willReadFrequently boolean option as well?
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;
}
Chrome (>= 111) supports display-p3 https://developer.chrome.com/articles/high-definition-css-color-guide/