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
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:
srgb
: denotes the sRGB color spacedisplay-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 via
getImageData()
.
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.
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}
Specifications
Specification |
---|
HTML Standard # 2dcontext:dom-context-2d-canvas-getcontextattributes-2 |
Browser compatibility
BCD tables only load in the browser