WebGLRenderingContext.canvas

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 Edge Firefox Internet Explorer Opera Safari Servo
Basic Support91214.0111125.1No support
OffscreenCanvasNo supportNo supportNo support2No supportNo supportNo supportNo support
Feature Android Chrome for Android Edge Mobile Firefox for Android IE Mobile Opera Mobile Safari Mobile
Basic Support(Yes)25No support(Yes)128.1
OffscreenCanvasNo supportNo supportNo supportNo support2No supportNo support

1. To access the WebGL context, use experimental-webgl rather than the standard webgl

2. This feature is experimentally implemented since Firefox 44; to activate it, in about:config, set gfx.offscreencanvas.enabled to true

See also

Document Tags and Contributors

 Contributors to this page: teoli, fscholz
 Last updated by: teoli,