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.
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
CanvasRenderingContext2D.canvas
- The
OffscreenCanvas
interface