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.