W3cubDocs

/Web APIs

CanvasRenderingContext2D: getContextAttributes() method

The CanvasRenderingContext2D.getContextAttributes() method returns an object that contains attributes used by the context.

Note that context attributes may be requested when creating the context with HTMLCanvasElement.getContext(), but the attributes that are actually supported and used may differ.

Syntax

js

getContextAttributes()

Parameters

None.

Return value

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:

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().

Examples

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.

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

js

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):

js

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}

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
getContextAttributes 7332–60 79 117 No 6019–47 15 734.4.3–60 7332–60 117 5219–44 15 11.02.0–8.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getContextAttributes