CanvasRenderingContext2D: getContextAttributes() method

None.

A CanvasRenderingContext2DSettings object that contains the actual context parameters. It has the following members:

alpha Optional

A Boolean indicating if the canvas contains an alpha channel. If false, the backdrop is always opaque, which can speed up drawing of transparent content and images.

colorSpace Optional

Specifies the color space of the rendering context. Possible values are:

• srgb: denotes the sRGB color space
• display-p3: denotes the display-p3 color space

desynchronized Optional

A Boolean indicating the user agent reduced the latency by desynchronizing the canvas paint cycle from the event loop.

willReadFrequently Optional

A Boolean indicating whether or not this canvas uses software acceleration (instead of hardware acceleration) to support frequent read-back operations viagetImageData().

This example shows how you can specify context attributes when creating a canvas context, and then call getContextAttributes() to read back the actual parameters that the browser used.

<pre id="log"></pre>

const logElement = document.getElementById("log");
function log(text) {
  logElement.innerText += text;
}

First we create a context using HTMLCanvasElement.getContext(), specifying just one context attribute.

let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d", { alpha: false });

If the getContextAttributes() method is supported, we use it to read back the actual attributes used by the browser (including those we explicitly specified):

if (ctx.getContextAttributes) {
  const attributes = ctx.getContextAttributes();
  log(JSON.stringify(attributes));
} else {
  log("CanvasRenderingContext2D.getContextAttributes() is not supported");
}

Depending on the attributes supported by the browser, the log below should display a string that looks something like: {alpha: false, colorSpace: 'srgb', desynchronized: false, willReadFrequently: false}

• HTMLCanvasElement.getContext()
• WebGLRenderingContext.getContextAttributes()