WebGLRenderingContext: canvas property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

Note: This feature is available in Web Workers.

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

js
gl.canvas

Return value

Either a HTMLCanvasElement or OffscreenCanvas object or null.

Examples

Canvas element

Given this <canvas> element:

html
<canvas id="canvas"></canvas>

You can get back a reference to it from the WebGLRenderingContext using the canvas property:

js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
gl.canvas; // HTMLCanvasElement

Offscreen canvas

Example using the experimental OffscreenCanvas object.

js
const offscreen = new OffscreenCanvas(256, 256);
const gl = offscreen.getContext("webgl");
gl.canvas; // OffscreenCanvas

Specifications

Specification
WebGL Specification
# DOM-WebGLRenderingContext-canvas

Browser compatibility

See also