WebGLRenderingContext: canvas property

{{APIRef("WebGL")}}{{AvailableInWorkers}}

The WebGLRenderingContext.canvas property is a read-only reference to the {{domxref("HTMLCanvasElement")}} or {{domxref("OffscreenCanvas")}} object that is associated with the context. It might be null if it is not associated with a {{HTMLElement("canvas")}} element or an {{domxref("OffscreenCanvas")}} object.

Value

Either a {{domxref("HTMLCanvasElement")}} or {{domxref("OffscreenCanvas")}} object or null.

Examples

Canvas element

Given this {{HTMLElement("canvas")}} element:

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

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

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

Offscreen canvas

Example using the experimental {{domxref("OffscreenCanvas")}} object.

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

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• {{domxref("CanvasRenderingContext2D.canvas")}}
• The {{domxref("OffscreenCanvas")}} interface