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:
var canvas = document.getElementById('myCanvas');
var 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.commit()
Experimental
-
Pushes frames back to the original HTMLCanvasElement
, if the context is not directly fixed to a specific canvas.
-
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 DOMString
elements with all the supported WebGL extensions.
-
WebGLRenderingContext.getExtension()
-
Returns an extension object.