web api instance method
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:
alphaOptional- : 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.
- : A Boolean indicating if the canvas contains an alpha channel.
If
colorSpaceOptional- : Indicates the color space of the rendering context. Possible values are:
srgb: denotes the sRGB color spacedisplay-p3: denotes the display-p3 color space
- : Indicates the color space of the rendering context. Possible values are:
colorTypeOptional- : Indicates the color type of the rendering context. Possible values are:
"unorm8"denotes the color channels to 8 bit unsigned values. This is the default value."float16"denotes the color channels to 16-bit floating-point values.
- : Indicates the color type of the rendering context. Possible values are:
desynchronizedOptional- : A Boolean indicating the user agent reduced the latency by desynchronizing the canvas paint cycle from the event loop.
willReadFrequentlyOptional- : A Boolean indicating whether or not this canvas uses software acceleration (instead of hardware acceleration) to support frequent read-back operations via
getImageData().
- : A Boolean indicating whether or not this canvas uses software acceleration (instead of hardware acceleration) to support frequent read-back operations via
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.
<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}