The WebGLRenderingContext
interface provides an interface to the OpenGL ES 2.0 graphics rendering context for the drawing surface of an HTML <canvas>
element.
To get an access to a WebGL context for 2D and/or 3D graphics rendering, call getContext()
on a <canvas>
element, supplying "webgl" as the argument:
const canvas = document.getElementById("myCanvas");
const gl = canvas.getContext("webgl");
Once you have the WebGL rendering context for a canvas, you can render within it. The WebGL tutorial has more information, examples, and resources on how to get started with WebGL.
If you require a WebGL 2.0 context, see WebGL2RenderingContext
; this supplies access to an implementation of OpenGL ES 3.0 graphics.
The following properties and methods provide general information and functionality to deal with the WebGL context:
WebGLRenderingContext.canvas
-
A read-only back-reference to the HTMLCanvasElement
. Might be null
if it is not associated with a <canvas>
element.
WebGLRenderingContext.drawingBufferWidth
-
The read-only width of the current drawing buffer. Should match the width of the canvas element associated with this context.
WebGLRenderingContext.drawingBufferHeight
-
The read-only height of the current drawing buffer. Should match the height of the canvas element associated with this context.
WebGLRenderingContext.getContextAttributes()
-
Returns a WebGLContextAttributes
object that contains the actual context parameters. Might return null
, if the context is lost.
WebGLRenderingContext.isContextLost()
-
Returns true
if the context is lost, otherwise returns false
.
WebGLRenderingContext.makeXRCompatible()
-
Ensures the context is compatible with the user's XR hardware, re-creating the context if necessary with a new configuration to do so. This can be used to start an application using standard 2D presentation, then transition to using a VR or AR mode later.
These methods manage WebGL extensions:
WebGLRenderingContext.getSupportedExtensions()
-
Returns an Array
of strings containing all the supported WebGL extensions.
WebGLRenderingContext.getExtension()
-
Returns an extension object.