The WebGLRenderingContext.canvas property is a read-only reference to the HTMLCanvasElement or OffscreenCanvas object that is associated with the context. It might be null if it is not associated with a <canvas> element or an OffscreenCanvas object.
Syntax
gl.canvas;
Return value
Either a HTMLCanvasElement or OffscreenCanvas object or null.
Examples
Canvas element
Given this <canvas> element:
<canvas id="canvas"></canvas>
You can get back a reference to it from the WebGLRenderingContext using the canvas property:
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
gl.canvas; // HTMLCanvasElement
Offscreen canvas
Example using the experimental OffscreenCanvas object.
var offscreen = new OffscreenCanvas(256, 256);
var gl = offscreen.getContext("webgl");
gl.canvas; // OffscreenCanvas
Specifications
| Specification | Status | Comment |
|---|---|---|
| WebGL 1.0 The definition of 'WebGLRenderingContext.canvas' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 9 | 4.0 (2.0) | 11 | 12 | 5.1 |
| OffscreenCanvas | Not supported | 44 (44) [1] | Not supported | Not supported | Not supported |
| Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | (Yes) | 25 | (Yes) | (Yes) | 12 | 8.1 |
| OffscreenCanvas | Not supported | 44 (44) [1] | Not supported | Not supported | Not supported | Not supported |
[1] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled to true.