The WebGLRenderingContext interface provides the OpenGL ES 2.0 rendering context for the drawing surface of an HTML {{HTMLElement("canvas")}} element.
To get an object of this interface, call {{domxref("HTMLCanvasElement.getContext()", "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.
Constants
See the WebGL constants page.
Context information
The following attributes and methods provide read-only information about the context:
- {{domxref("WebGLRenderingContext.canvas")}}
- A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.
- {{domxref("WebGLRenderingContext.drawingBufferWidth")}}
- The read-only width of the current drawing buffer. Should match the width of the canvas element associated with this context.
- {{domxref("WebGLRenderingContext.drawingBufferHeight")}}
- The read-only height of the current drawing buffer. Should match the height of the canvas element associated with this context.
- {{domxref("WebGLRenderingContext.getContextAttributes()")}}
- Returns a
WebGLContextAttributes
object that contains the actual context parameters. Might return {{jsxref("null")}}, if the context is lost. - {{domxref("WebGLRenderingContext.isContextLost()")}}
- Returns
true
if the context is lost, otherwise returnsfalse
.
Viewing and clipping
- {{domxref("WebGLRenderingContext.scissor()")}}
- Defines the scissor box.
- {{domxref("WebGLRenderingContext.viewport()")}}
- Sets the viewport.
State information
- {{domxref("WebGLRenderingContext.activeTexture()")}}
- Selects the active texture unit.
- {{domxref("WebGLRenderingContext.blendColor()")}}
- Sets the source and destination blending factors.
- {{domxref("WebGLRenderingContext.blendEquation()")}}
- Sets both the RGB blend equation and alpha blend equation to a single equation.
- {{domxref("WebGLRenderingContext.blendEquationSeparate()")}}
- Sets the RGB blend equation and alpha blend equation separately.
- {{domxref("WebGLRenderingContext.blendFunc()")}}
- Defines which function is used for blending pixel arithmetic.
- {{domxref("WebGLRenderingContext.blendFuncSeparate()")}}
- Defines which function is used for blending pixel arithmetic for RGB and alpha components separately.
- {{domxref("WebGLRenderingContext.clearColor()")}}
- Specifies the color values used when clearing color buffers.
- {{domxref("WebGLRenderingContext.clearDepth()")}}
- Specifies the depth value used when clearing the depth buffer.
- {{domxref("WebGLRenderingContext.clearStencil()")}}
- Specifies the stencil value used when clearing the stencil buffer.
- {{domxref("WebGLRenderingContext.colorMask()")}}
- Sets which color components to enable or to disable when drawing or rendering to a {{domxref("WebGLFramebuffer")}}.
- {{domxref("WebGLRenderingContext.cullFace()")}}
- Specifies whether or not front- and/or back-facing polygons can be culled.
- {{domxref("WebGLRenderingContext.depthFunc()")}}
- Specifies a function that compares incoming pixel depth to the current depth buffer value.
- {{domxref("WebGLRenderingContext.depthMask()")}}
- Sets whether writing into the depth buffer is enabled or disabled.
- {{domxref("WebGLRenderingContext.depthRange()")}}
- Specifies the depth range mapping from normalized device coordinates to window or viewport coordinates.
- {{domxref("WebGLRenderingContext.disable()")}}
- Disables specific WebGL capabilities for this context.
- {{domxref("WebGLRenderingContext.enable()")}}
- Enables specific WebGL capabilities for this context.
- {{domxref("WebGLRenderingContext.frontFace()")}}
- Specifies whether polygons are front- or back-facing by setting a winding orientation.
- {{domxref("WebGLRenderingContext.getParameter()")}}
- Returns a value for the passed parameter name.
- {{domxref("WebGLRenderingContext.getError()")}}
- Returns error information.
- {{domxref("WebGLRenderingContext.hint()")}}
- Specifies hints for certain behaviors. The interpretation of these hints depend on the implementation.
- {{domxref("WebGLRenderingContext.isEnabled()")}}
- Tests whether a specific WebGL capability is enabled or not for this context.
- {{domxref("WebGLRenderingContext.lineWidth()")}}
- Sets the line width of rasterized lines.
- {{domxref("WebGLRenderingContext.pixelStorei()")}}
- Specifies the pixel storage modes
- {{domxref("WebGLRenderingContext.polygonOffset()")}}
- Specifies the scale factors and units to calculate depth values.
- {{domxref("WebGLRenderingContext.sampleCoverage()")}}
- Specifies multi-sample coverage parameters for anti-aliasing effects.
- {{domxref("WebGLRenderingContext.stencilFunc()")}}
- Sets the both front and back function and reference value for stencil testing.
- {{domxref("WebGLRenderingContext.stencilFuncSeparate()")}}
- Sets the front and/or back function and reference value for stencil testing.
- {{domxref("WebGLRenderingContext.stencilMask()")}}
- Controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.
- {{domxref("WebGLRenderingContext.stencilMaskSeparate()")}}
- Controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.
- {{domxref("WebGLRenderingContext.stencilOp()")}}
- Sets both the front and back-facing stencil test actions.
- {{domxref("WebGLRenderingContext.stencilOpSeparate()")}}
- Sets the front and/or back-facing stencil test actions.
Buffers
- {{domxref("WebGLRenderingContext.bindBuffer()")}}
- Binds a
WebGLBuffer
object to a given target. - {{domxref("WebGLRenderingContext.bufferData()")}}
- Updates buffer data.
- {{domxref("WebGLRenderingContext.bufferSubData()")}}
- Updates buffer data starting at a passed offset.
- {{domxref("WebGLRenderingContext.createBuffer()")}}
- Creates a
WebGLBuffer
object. - {{domxref("WebGLRenderingContext.deleteBuffer()")}}
- Deletes a
WebGLBuffer
object. - {{domxref("WebGLRenderingContext.getBufferParameter()")}}
- Returns information about the buffer.
- {{domxref("WebGLRenderingContext.isBuffer()")}}
- Returns a Boolean indicating if the passed buffer is valid.
Framebuffers
- {{domxref("WebGLRenderingContext.bindFramebuffer()")}}
- Binds a
WebGLFrameBuffer
object to a given target. - {{domxref("WebGLRenderingContext.checkFramebufferStatus()")}}
- Returns the status of the framebuffer.
- {{domxref("WebGLRenderingContext.createFramebuffer()")}}
- Creates a
WebGLFrameBuffer
object. - {{domxref("WebGLRenderingContext.deleteFramebuffer()")}}
- Deletes a
WebGLFrameBuffer
object. - {{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}}
- Attaches a
WebGLRenderingBuffer
object to aWebGLFrameBuffer
object. - {{domxref("WebGLRenderingContext.framebufferTexture2D()")}}
- Attaches a textures image to a
WebGLFrameBuffer
object. - {{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}}
- Returns information about the framebuffer.
- {{domxref("WebGLRenderingContext.isFramebuffer()")}}
- Returns a Boolean indicating if the passed
WebGLFrameBuffer
object is valid. - {{domxref("WebGLRenderingContext.readPixels()")}}
- Reads a block of pixels from the
WebGLFrameBuffer
.
Renderbuffers
- {{domxref("WebGLRenderingContext.bindRenderbuffer()")}}
- Binds a
WebGLRenderBuffer
object to a given target. - {{domxref("WebGLRenderingContext.createRenderbuffer()")}}
- Creates a
WebGLRenderBuffer
object. - {{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}
- Deletes a
WebGLRenderBuffer
object. - {{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}
- Returns information about the renderbuffer.
- {{domxref("WebGLRenderingContext.isRenderbuffer()")}}
- Returns a Boolean indicating if the passed
WebGLRenderingBuffer
is valid. - {{domxref("WebGLRenderingContext.renderbufferStorage()")}}
- Creates a renderbuffer data store.
Textures
- {{domxref("WebGLRenderingContext.bindTexture()")}}
- Binds a
WebGLTexture
object to a given target. - {{domxref("WebGLRenderingContext.compressedTexImage2D()")}}
- Specifies a 2D texture image in a compressed format.
- {{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}
- Specifies a 2D texture sub-image in a compressed format.
- {{domxref("WebGLRenderingContext.copyTexImage2D()")}}
- Copies a 2D texture image.
- {{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}
- Copies a 2D texture sub-image.
- {{domxref("WebGLRenderingContext.createTexture()")}}
- Creates a
WebGLTexture
object. - {{domxref("WebGLRenderingContext.deleteTexture()")}}
- Deletes a
WebGLTexture
object. - {{domxref("WebGLRenderingContext.generateMipmap()")}}
- Generates a set of mipmaps for a
WebGLTexture
object. - {{domxref("WebGLRenderingContext.getTexParameter()")}}
- Returns information about the texture.
- {{domxref("WebGLRenderingContext.isTexture()")}}
- Returns a Boolean indicating if the passed
WebGLTexture
is valid. - {{domxref("WebGLRenderingContext.texImage2D()")}}
- Specifies a 2D texture image.
- {{domxref("WebGLRenderingContext.texSubImage2D()")}}
- Updates a sub-rectangle of the current
WebGLTexture
. - {{domxref("WebGLRenderingContext.texParameterf()")}}
- Sets texture parameters.
- {{domxref("WebGLRenderingContext.texParameteri()")}}
- Sets texture parameters.
Programs and shaders
- {{domxref("WebGLRenderingContext.attachShader()")}}
- Attaches a
WebGLShader
to aWebGLProgram
. - {{domxref("WebGLRenderingContext.bindAttribLocation()")}}
- ...
- {{domxref("WebGLRenderingContext.compileShader()")}}
- Compiles a
WebGLShader
. - {{domxref("WebGLRenderingContext.createProgram()")}}
- Creates a
WebGLProgram
. - {{domxref("WebGLRenderingContext.createShader()")}}
- Creates a
WebGLShader
. - {{domxref("WebGLRenderingContext.deleteProgram()")}}
- Deletes a
WebGLProgram
. - {{domxref("WebGLRenderingContext.deleteShader()")}}
- Deletes a
WebGLShader
. - {{domxref("WebGLRenderingContext.detachShader()")}}
- Detaches a
WebGLShader
. - {{domxref("WebGLRenderingContext.getAttachedShaders()")}}
- Returns a list of
WebGLShader
objects attached to aWebGLProgram
. - {{domxref("WebGLRenderingContext.getProgramParameter()")}}
- Returns information about the program.
- {{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
- Returns the information log for a
WebGLProgram
object. - {{domxref("WebGLRenderingContext.getShaderParameter()")}}
- Returns information about the shader.
- {{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}
- Returns a
WebGLShaderPrecisionFormat
object describing the precision for the numeric format of the shader. - {{domxref("WebGLRenderingContext.getShaderInfoLog()")}}
- Returns the information log for a
WebGLShader
object. - {{domxref("WebGLRenderingContext.getShaderSource()")}}
- Returns the source code of a
WebGLShader
as a string. - {{domxref("WebGLRenderingContext.isProgram()")}}
- Returns a Boolean indicating if the passed
WebGLProgram
is valid. - {{domxref("WebGLRenderingContext.isShader()")}}
- Returns a Boolean indicating if the passed
WebGLShader
is valid. - {{domxref("WebGLRenderingContext.linkProgram()")}}
- Links the passed
WebGLProgram
object. - {{domxref("WebGLRenderingContext.shaderSource()")}}
- Sets the source code in a
WebGLShader
. - {{domxref("WebGLRenderingContext.useProgram()")}}
- Uses the specified
WebGLProgram
as part the current rendering state. - {{domxref("WebGLRenderingContext.validateProgram()")}}
- Validates a
WebGLProgram
.
Uniforms and attributes
- {{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}
- ...
- {{domxref("WebGLRenderingContext.enableVertexAttribArray()")}}
- ...
- {{domxref("WebGLRenderingContext.getActiveAttrib()")}}
- ...
- {{domxref("WebGLRenderingContext.getActiveUniform()")}}
- ...
- {{domxref("WebGLRenderingContext.getAttribLocation()")}}
- ...
- {{domxref("WebGLRenderingContext.getUniform()")}}
- ...
- {{domxref("WebGLRenderingContext.getVertexAttrib()")}}
- ...
- {{domxref("WebGLRenderingContext.getVertexAttribOffset()")}}
- ...
- {{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}
- ...
- {{domxref("WebGLRenderingContext.uniform()", "WebGLRenderingContext.uniform[1234][fi][v]()")}}
- ...
- {{domxref("WebGLRenderingContext.uniformMatrix()", "WebGLRenderingContext.uniformMatrix[1234][fv]()")}}
- ...
- {{domxref("WebGLRenderingContext.vertexAttrib()", "WebGLRenderingContext.vertexAttrib[1234][fi][v]()")}}
- ...
- {{domxref("WebGLRenderingContext.vertexAttribPointer()")}}
- ...
Drawing buffers
- {{domxref("WebGLRenderingContext.clear()")}}
- Clears specified buffers to preset values.
- {{domxref("WebGLRenderingContext.drawArrays()")}}
- ...
- {{domxref("WebGLRenderingContext.drawElements()")}}
- ...
- {{domxref("WebGLRenderingContext.finish()")}}
- ...
- {{domxref("WebGLRenderingContext.flush()")}}
- ...
Working with extensions
These methods manage WebGL extensions:
- {{domxref("WebGLRenderingContext.getSupportedExtensions()")}}
- Returns an {{jsxref("Array")}} of {{domxref("DOMString")}} elements with all the supported WebGL extensions.
- {{domxref("WebGLRenderingContext.getExtension()")}}
- Returns an extension object.
Examples
WebGL context feature detection
{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "summary")}}
{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "detect-webgl-source")}}
{{EmbedLiveSample("detect-webgl-source", 660,150 ,"" , "Learn/WebGL/By_example/Detect_WebGL")}}
Effect of canvas size on rendering with WebGL
{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-intro")}}
{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-source")}}
{{EmbedLiveSample("canvas-size-and-webgl-source", 660,180 ,"" , "Learn/WebGL/By_example/Canvas_size_and_WebGL")}}
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('WebGL', "#5.14", "WebGLRenderingContext")}} | {{Spec2('WebGL')}} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | {{CompatChrome("9")}} | 20 | {{CompatGeckoDesktop("2.0")}} | {{CompatIE("11")}} | {{CompatOpera("12")}} | {{CompatSafari("5.1")}} |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|
Basic support | {{CompatUnknown}} | 25 | {{CompatVersionUnknown}} | {{CompatGeckoMobile("2.0")}} | 1.0 | {{CompatUnknown}} | 12 | 8.0 |
See also
- {{domxref("HTMLCanvasElement")}}