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
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Feature | Chrome | Firefox | Edge | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic Support | 9 | 4.0 | 12 | 11 | 12 | 5.1 |
OffscreenCanvas | (No) | 44.01 | (No) | (No) | (No) | (No) |
| Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
| Basic Support | (Yes) | 25 | (Yes) | (Yes) | 11 | 12 | 8.1 |
OffscreenCanvas | (No) | (No) | (No) | (No) | (No) | (No) | (No) |
1. From version 44.0, this feature is behind the gfx.offscreencanvas.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.