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

Author: Fil

README.md

@@ -41,9 +41,9 @@ html`<canvas width=960 height=500>`
 
 If you are using [2D Canvas](https://www.w3.org/TR/2dcontext/) (rather than [WebGL](https://webglfundamentals.org/)), you should use [DOM.context2d](#DOM_context2d) instead of DOM.canvas for automatic pixel density scaling.
 
-<a href="#DOM_context2d" name="DOM_context2d">#</a> DOM.<b>context2d</b>(<i>width</i>, <i>height</i>[, <i>dpi</i>]) [<>](https://github.com/observablehq/stdlib/blob/master/src/dom/context2d.js "Source")
+<a href="#DOM_context2d" name="DOM_context2d">#</a> DOM.<b>context2d</b>(<i>width</i>, <i>height</i>[, <i>options</i>]) [<>](https://github.com/observablehq/stdlib/blob/master/src/dom/context2d.js "Source")
 
-Returns a new canvas context with the specified *width* and *height* and the specified device pixel ratio *dpi*. If *dpi* is not specified, it defaults to [*window*.devicePixelRatio](https://developer.mozilla.org/docs/Web/API/Window/devicePixelRatio). To access the context’s canvas, use [*context*.canvas](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/canvas). For example, to create a 960×500 canvas:
+Returns a new canvas context with the specified *width* and *height* and the specified *options*. If the options are specified as an object, its scale and colorSpace properties are considered. A string or number value specifies the scale. The scale defaults to [*window*.devicePixelRatio](https://developer.mozilla.org/docs/Web/API/Window/devicePixelRatio). The colorSpace defaults to srgb—the other acceptable value is display-p3. To access the context’s canvas, use [*context*.canvas](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/canvas). For example, to create a 960×500 canvas:
 
 ```js
 {

src/dom/context2d.js

@@ -1,10 +1,22 @@
-export default function(width, height, dpi) {
-  if (dpi == null) dpi = devicePixelRatio;
+export default function(width, height, options) {
+  var colorSpace = "srgb";
+  var scale = devicePixelRatio;
+  if (options == +options) {
+    scale = +options;
+  } else {
+    if (options.scale) scale = +options.scale;
+    if (options.colorSpace === "display-p3") colorSpace = options.colorSpace;
+  }
   var canvas = document.createElement("canvas");
-  canvas.width = width * dpi;
-  canvas.height = height * dpi;
+  canvas.width = width * scale;
+  canvas.height = height * scale;
   canvas.style.width = width + "px";
-  var context = canvas.getContext("2d");
-  context.scale(dpi, dpi);
+  var context;
+  try {
+    context = canvas.getContext("2d", {colorSpace});
+  } catch(e) {
+    context = canvas.getContext("2d");
+  }
+  context.scale(scale, scale);
   return context;
 }