Widely availableBest when you truly need GPU rendering or 3D scenes. Use simpler rendering paths for ordinary UI and document content.
Canvas and graphics Widely available

WebGL

WebGL brings GPU-accelerated 2D and 3D drawing into the browser through the canvas element. It supports immersive visuals, data scenes, and rendering pipelines that go beyond the 2D canvas API.

WebGL3DGraphics

Overview

WebGL brings GPU-accelerated 2D and 3D drawing into the browser through the canvas element. It supports immersive visuals, data scenes, and rendering pipelines that go beyond the 2D canvas API.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
WebGLActiveInfo
10
12
4
5.1
25
8
getContext (webgl context)

WebGL context
33
79
24
8
33
8
getContext (webgl context options alpha parameter)

`options.alpha` parameter
32
12
30
10.1
32
10.3
getContext (webgl context options failIfMajorPerformanceCaveat parameter)

`options.failIfMajorPerformanceCaveat` parameter
33
12
41
10.1
33
10.3
getContext (webgl context options powerPreference parameter)

`options.powerPreference` parameter
75
79
63
10.1
75
10.3
webglcontextcreationerror_event

The webglcontextcreationerror event of the WebGL API is fired if the user agent is unable to create a WebGLRenderingContext context.
9
12
49
5.1
25
8
webglcontextlost_event

The webglcontextlost event of the WebGL API is fired if the user agent detects that the drawing buffer associated with a WebGLRenderingContext object has been lost.
9
12
4
5.1
25
8
webglcontextrestored_event

The webglcontextrestored event of the WebGL API is fired if the user agent restores the drawing buffer for a WebGLRenderingContext object.
9
12
4
5.1
25
8
name

The read-only WebGLActiveInfo.name property represents the name of the requested data returned by calling the WebGLRenderingContext.getActiveAttrib() or WebGLRenderingContext.getActiveUniform() methods.
10
12
4
5.1
25
8
size

The read-only WebGLActiveInfo.size property is a Number representing the size of the requested data returned by calling the WebGLRenderingContext.getActiveAttrib() or WebGLRenderingContext.getActiveUniform() methods.
10
12
4
5.1
25
8
type

The read-only WebGLActiveInfo.type property represents the type of the requested data returned by calling the WebGLRenderingContext.getActiveAttrib() or WebGLRenderingContext.getActiveUniform() methods.
10
12
4
5.1
25
8
worker_support
Experimental

Available in workers
105
WebGLBuffer

The WebGLBuffer interface is part of the WebGL API and represents an opaque buffer object storing data such as vertices or colors.
10
12
4
5.1
25
8
worker_support
Experimental

Available in workers
105
WebGLContextEvent

The WebGLContextEvent interface is part of the WebGL API and is an interface for an event that is generated in response to a status change to the WebGL rendering context.
9
12
49
5.1
25
8
statusMessage

The read-only WebGLContextEvent.statusMessage property contains additional event status information, or is an empty string if no additional information is available.
9
12
49
5.1
25
8
WebGLContextEvent

The WebGLContextEvent() constructor creates a new WebGLContextEvent object.
17
12
49
6
25
8
worker_support
Experimental

Available in workers
105
WebGLFramebuffer

The WebGLFramebuffer interface is part of the WebGL API and represents a collection of buffers that serve as a rendering destination.
10
12
4
5.1
25
8
worker_support
Experimental

Available in workers
105
WebGLObject
Experimental

The WebGLObject is part of the WebGL API and is the parent interface for all WebGL objects.
126
126
126
WebGLProgram

The WebGLProgram is part of the WebGL API and is a combination of two compiled WebGLShaders consisting of a vertex shader and a fragment shader (both written in GLSL).
10
12
4
5.1
25
8
worker_support
Experimental

Available in workers
105
WebGLRenderbuffer

The WebGLRenderbuffer interface is part of the WebGL API and represents a buffer that can contain an image, or that can be a source or target of a rendering operation.
10
12
4
5.1
25
8
worker_support
Experimental

Available in workers
105
WebGLRenderingContext

The WebGLRenderingContext interface provides an interface to the OpenGL ES 2.0 graphics rendering context for the drawing surface of an HTML canvas element.
9
12
4
5.1
25
8
activeTexture

The WebGLRenderingContext.activeTexture() method of the WebGL API specifies which texture unit to make active.
9
12
4
5.1
25
8
attachShader

The WebGLRenderingContext.attachShader() method of the WebGL API attaches either a fragment or vertex WebGLShader to a WebGLProgram.
9
12
4
5.1
25
8
bindAttribLocation

The WebGLRenderingContext.bindAttribLocation() method of the WebGL API binds a generic vertex index to an attribute variable.
9
12
4
5.1
25
8
bindBuffer

The WebGLRenderingContext.bindBuffer() method of the WebGL API binds a given WebGLBuffer to a target.
9
12
4
5.1
25
8
bindFramebuffer

The WebGLRenderingContext.bindFramebuffer() method of the WebGL API binds to the specified target the provided WebGLFramebuffer, or, if the framebuffer argument is null, the default WebGLFramebuffer, which is associated with the canvas rendering context.
9
12
4
5.1
25
8
bindRenderbuffer

The WebGLRenderingContext.bindRenderbuffer() method of the WebGL API binds a given WebGLRenderbuffer to a target, which must be gl.RENDERBUFFER.
9
12
4
5.1
25
8
bindTexture

The WebGLRenderingContext.bindTexture() method of the WebGL API binds a given WebGLTexture to a target (binding point).
9
12
4
5.1
25
8
blendColor

The WebGLRenderingContext.blendColor() method of the WebGL API is used to set the source and destination blending factors.
9
12
4
5.1
25
8
blendEquation

The WebGLRenderingContext.blendEquation() method of the WebGL API is used to set both the RGB blend equation and alpha blend equation to a single equation.
9
12
4
5.1
25
8
blendEquationSeparate

The WebGLRenderingContext.blendEquationSeparate() method of the WebGL API is used to set the RGB blend equation and alpha blend equation separately.
9
12
4
5.1
25
8
blendFunc

The WebGLRenderingContext.blendFunc() method of the WebGL API defines which function is used for blending pixel arithmetic.
9
12
4
5.1
25
8
blendFuncSeparate

The WebGLRenderingContext.blendFuncSeparate() method of the WebGL API defines which function is used for blending pixel arithmetic for RGB and alpha components separately.
9
12
4
5.1
25
8
bufferData

The WebGLRenderingContext.bufferData() method of the WebGL API initializes and creates the buffer object's data store.
9
12
4
5.1
25
8
bufferSubData

The WebGLRenderingContext.bufferSubData() method of the WebGL API updates a subset of a buffer object's data store.
9
12
4
5.1
25
8
canvas

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.
9
12
4
5.1
25
8
checkFramebufferStatus

The WebGLRenderingContext.checkFramebufferStatus() method of the WebGL API returns the completeness status of the WebGLFramebuffer object.
9
12
4
5.1
25
8
clear

The WebGLRenderingContext.clear() method of the WebGL API clears buffers to preset values.
9
12
4
5.1
25
8
clearColor

The WebGLRenderingContext.clearColor() method of the WebGL API specifies the color values used when clearing color buffers.
9
12
4
5.1
25
8
clearDepth

The WebGLRenderingContext.clearDepth() method of the WebGL API specifies the clear value for the depth buffer.
9
12
4
5.1
25
8
clearStencil

The WebGLRenderingContext.clearStencil() method of the WebGL API specifies the clear value for the stencil buffer.
9
12
4
5.1
25
8
colorMask

The WebGLRenderingContext.colorMask() method of the WebGL API sets which color components to enable or to disable when drawing or rendering to a WebGLFramebuffer.
9
12
4
5.1
25
8
compileShader

The WebGLRenderingContext.compileShader() method of the WebGL API compiles a GLSL shader into binary data so that it can be used by a WebGLProgram.
9
12
4
5.1
25
8
compressedTexImage2D

The compressedTexImage2D() method of the WebGLRenderingContext interface of the WebGL API specifies a two-dimensional texture image in a compressed format.
9
12
4
5.1
25
8
compressedTexSubImage2D

The compressedTexSubImage2D() method of the WebGLRenderingContext interface of the WebGL API specifies a two-dimensional sub-rectangle for a texture image in a compressed format.
9
12
4
5.1
25
8
copyTexImage2D

The copyTexImage2D() method of the WebGLRenderingContext interface of the WebGL API copies pixels from the current WebGLFramebuffer into a 2D texture image.
9
12
4
5.1
25
8
copyTexSubImage2D

The copyTexSubImage2D() method of the WebGLRenderingContext interface of the WebGL API copies pixels from the current WebGLFramebuffer into a 2D texture sub-image.
9
12
4
5.1
25
8
createBuffer

The WebGLRenderingContext.createBuffer() method of the WebGL API creates and initializes a WebGLBuffer storing data such as vertices or colors.
9
12
4
5.1
25
8
createFramebuffer

The WebGLRenderingContext.createFramebuffer() method of the WebGL API creates and initializes a WebGLFramebuffer object.
9
12
4
5.1
25
8
createProgram

The WebGLRenderingContext.createProgram() method of the WebGL API creates and initializes a WebGLProgram object.
9
12
4
5.1
25
8
createRenderbuffer

The WebGLRenderingContext.createRenderbuffer() method of the WebGL API creates and initializes a WebGLRenderbuffer object.
9
12
4
5.1
25
8
createShader

The WebGLRenderingContext method createShader() of the WebGL API creates a WebGLShader that can then be configured further using WebGLRenderingContext.shaderSource() and WebGLRenderingContext.compileShader().
9
12
4
5.1
25
8
createTexture

The WebGLRenderingContext.createTexture() method of the WebGL API creates and initializes a WebGLTexture object.
9
12
4
5.1
25
8
cullFace

The WebGLRenderingContext.cullFace() method of the WebGL API specifies whether or not front- and/or back-facing polygons can be culled.
9
12
4
5.1
25
8
deleteBuffer

The WebGLRenderingContext.deleteBuffer() method of the WebGL API deletes a given WebGLBuffer. This method has no effect if the buffer has already been deleted. Normally you don't need to call this method yourself, when the buffer object is dereferenced it will be marked as free.
9
12
4
5.1
25
8
deleteFramebuffer

The WebGLRenderingContext.deleteFramebuffer() method of the WebGL API deletes a given WebGLFramebuffer object. This method has no effect if the frame buffer has already been deleted.
9
12
4
5.1
25
8
deleteProgram

The WebGLRenderingContext.deleteProgram() method of the WebGL API deletes a given WebGLProgram object. This method has no effect if the program has already been deleted.
9
12
4
5.1
25
8
deleteRenderbuffer

The WebGLRenderingContext.deleteRenderbuffer() method of the WebGL API deletes a given WebGLRenderbuffer object. This method has no effect if the render buffer has already been deleted.
9
12
4
5.1
25
8
deleteShader

The WebGLRenderingContext.deleteShader() method of the WebGL API marks a given WebGLShader object for deletion. It will then be deleted whenever the shader is no longer in use. This method has no effect if the shader has already been deleted, and the WebGLShader is automatically marked for deletion when it is destroyed by the garbage collector.
9
12
4
5.1
25
8
deleteTexture

The WebGLRenderingContext.deleteTexture() method of the WebGL API deletes a given WebGLTexture object. This method has no effect if the texture has already been deleted.
9
12
4
5.1
25
8
depthFunc

The WebGLRenderingContext.depthFunc() method of the WebGL API specifies a function that compares incoming pixel depth to the current depth buffer value.
9
12
4
5.1
25
8
depthMask

The WebGLRenderingContext.depthMask() method of the WebGL API sets whether writing into the depth buffer is enabled or disabled.
9
12
4
5.1
25
8
depthRange

The WebGLRenderingContext.depthRange() method of the WebGL API specifies the depth range mapping from normalized device coordinates to window or viewport coordinates.
9
12
4
5.1
25
8
detachShader

The WebGLRenderingContext.detachShader() method of the WebGL API detaches a previously attached WebGLShader from a WebGLProgram.
9
12
4
5.1
25
8
disable

The WebGLRenderingContext.disable() method of the WebGL API disables specific WebGL capabilities for this context.
9
12
4
5.1
25
8
disableVertexAttribArray

The WebGLRenderingContext.disableVertexAttribArray() method of the WebGL API turns the generic vertex attribute array off at a given index position.
9
12
4
5.1
25
8
drawArrays

The WebGLRenderingContext.drawArrays() method of the WebGL API renders primitives from array data.
9
12
4
5.1
25
8
drawElements

The WebGLRenderingContext.drawElements() method of the WebGL API renders primitives from array data.
9
12
4
5.1
25
8
drawingBufferFormat
Experimental
122
122
122
drawingBufferHeight

The read-only WebGLRenderingContext.drawingBufferHeight property represents the actual height of the current drawing buffer. It should match the height attribute of the canvas element associated with this context, but might differ if the implementation is not able to provide the requested height.
9
12
4
5.1
25
8
drawingBufferStorage
Experimental
122
122
122
drawingBufferWidth

The read-only WebGLRenderingContext.drawingBufferWidth property represents the actual width of the current drawing buffer. It should match the width attribute of the canvas element associated with this context, but might differ if the implementation is not able to provide the requested width.
9
12
4
5.1
25
8
enable

The WebGLRenderingContext.enable() method of the WebGL API enables specific WebGL capabilities for this context.
9
12
4
5.1
25
8
enableVertexAttribArray

The WebGLRenderingContext method enableVertexAttribArray(), part of the WebGL API, turns on the generic vertex attribute array at the specified index into the list of attribute arrays.
9
12
4
5.1
25
8
finish

The WebGLRenderingContext.finish() method of the WebGL API blocks execution until all previously called commands are finished.
9
12
4
5.1
25
8
flush

The WebGLRenderingContext.flush() method of the WebGL API empties different buffer commands, causing all commands to be executed as quickly as possible.
9
12
4
5.1
25
8
framebufferRenderbuffer

The WebGLRenderingContext.framebufferRenderbuffer() method of the WebGL API attaches a WebGLRenderbuffer object to a WebGLFramebuffer object.
9
12
4
5.1
25
8
framebufferTexture2D

The WebGLRenderingContext.framebufferTexture2D() method of the WebGL API attaches a texture to a WebGLFramebuffer.
9
12
4
5.1
25
8
frontFace

The WebGLRenderingContext.frontFace() method of the WebGL API specifies whether polygons are front- or back-facing by setting a winding orientation.
9
12
4
5.1
25
8
generateMipmap

The WebGLRenderingContext.generateMipmap() method of the WebGL API generates a set of mipmaps for a WebGLTexture object.
9
12
4
5.1
25
8
getActiveAttrib

The WebGLRenderingContext.getActiveAttrib() method of the WebGL API returns a WebGLActiveInfo object containing size, type, and name of a vertex attribute. It is generally used when querying unknown attributes either for debugging or generic library creation.
9
12
4
5.1
25
8
getActiveUniform

The WebGLRenderingContext.getActiveUniform() method of the WebGL API returns a WebGLActiveInfo object containing size, type, and name of a uniform attribute. It is generally used when querying unknown uniforms either for debugging or generic library creation.
9
12
4
5.1
25
8
getAttachedShaders

The WebGLRenderingContext.getAttachedShaders() method of the WebGL API returns a list of WebGLShader objects attached to a WebGLProgram.
9
12
4
5.1
25
8
getAttribLocation

The WebGLRenderingContext.getAttribLocation() method of the WebGL API returns the location of an attribute variable in a given WebGLProgram.
9
12
4
5.1
25
8
getBufferParameter

The WebGLRenderingContext.getBufferParameter() method of the WebGL API returns information about the buffer.
9
12
4
5.1
25
8
getContextAttributes

The WebGLRenderingContext.getContextAttributes() method returns a WebGLContextAttributes object that contains the actual context parameters. Might return null, if the context is lost.
9
12
4
5.1
25
8
getError

The WebGLRenderingContext.getError() method of the WebGL API returns error information.
9
12
4
5.1
25
8
getExtension

The WebGLRenderingContext.getExtension() method enables a WebGL extension.
9
12
4
5.1
25
8
getFramebufferAttachmentParameter

The WebGLRenderingContext.getFramebufferAttachmentParameter() method of the WebGL API returns information about a framebuffer's attachment.
9
12
4
5.1
25
8
getParameter

The WebGLRenderingContext.getParameter() method of the WebGL API returns a value for the passed parameter name.
9
12
4
5.1
25
8
getProgramInfoLog

The WebGLRenderingContext.getProgramInfoLog returns the information log for the specified WebGLProgram object. It contains errors that occurred during failed linking or validation of WebGLProgram objects.
9
12
4
5.1
25
8
getProgramParameter

The WebGLRenderingContext.getProgramParameter() method of the WebGL API returns information about the given program.
9
12
4
5.1
25
8
getRenderbufferParameter

The WebGLRenderingContext.getRenderbufferParameter() method of the WebGL API returns information about the renderbuffer.
9
12
4
5.1
25
8
getShaderInfoLog

The WebGLRenderingContext.getShaderInfoLog returns the information log for the specified WebGLShader object. It contains warnings, debugging and compile information.
9
12
4
5.1
25
8
getShaderParameter

The WebGLRenderingContext.getShaderParameter() method of the WebGL API returns information about the given shader.
9
12
4
5.1
25
8
getShaderPrecisionFormat

The WebGLRenderingContext.getShaderPrecisionFormat() method of the WebGL API returns a new WebGLShaderPrecisionFormat object describing the range and precision for the specified shader numeric format.
9
12
4
5.1
25
8
getShaderSource

The WebGLRenderingContext.getShaderSource() method of the WebGL API returns the source code of a WebGLShader as a string.
9
12
4
5.1
25
8
getSupportedExtensions

The WebGLRenderingContext.getSupportedExtensions() method returns a list of all the supported WebGL extensions.
9
12
4
5.1
25
8
getTexParameter

The WebGLRenderingContext.getTexParameter() method of the WebGL API returns information about the given texture.
9
12
4
5.1
25
8
getUniform

The WebGLRenderingContext.getUniform() method of the WebGL API returns the value of a uniform variable at a given location.
9
12
4
5.1
25
8
getUniformLocation

Part of the WebGL API, the WebGLRenderingContext method getUniformLocation() returns the location of a specific uniform variable which is part of a given WebGLProgram.
9
12
4
5.1
25
8
getVertexAttrib

The WebGLRenderingContext.getVertexAttrib() method of the WebGL API returns information about a vertex attribute at a given position.
9
12
4
5.1
25
8
getVertexAttribOffset

The WebGLRenderingContext.getVertexAttribOffset() method of the WebGL API returns the address of a specified vertex attribute.
9
12
4
5.1
25
8
hint

The WebGLRenderingContext.hint() method of the WebGL API specifies hints for certain behaviors. The interpretation of these hints depend on the implementation.
9
12
4
5.1
25
8
isBuffer

The WebGLRenderingContext.isBuffer() method of the WebGL API returns true if the passed WebGLBuffer is valid and false otherwise.
9
12
4
5.1
25
8
isContextLost

The WebGLRenderingContext.isContextLost() method returns a boolean value indicating whether or not the WebGL context has been lost and must be re-established before rendering can resume.
9
12
4
5.1
25
8
isEnabled

The WebGLRenderingContext.isEnabled() method of the WebGL API tests whether a specific WebGL capability is enabled or not for this context.
9
12
4
5.1
25
8
isFramebuffer

The WebGLRenderingContext.isFramebuffer() method of the WebGL API returns true if the passed WebGLFramebuffer is valid and false otherwise.
9
12
4
5.1
25
8
isProgram

The WebGLRenderingContext.isProgram() method of the WebGL API returns true if the passed WebGLProgram is valid, false otherwise.
9
12
4
5.1
25
8
isRenderbuffer

The WebGLRenderingContext.isRenderbuffer() method of the WebGL API returns true if the passed WebGLRenderbuffer is valid and false otherwise.
9
12
4
5.1
25
8
isShader

The WebGLRenderingContext.isShader() method of the WebGL API returns true if the passed WebGLShader is valid, false otherwise.
9
12
4
5.1
25
8
isTexture

The WebGLRenderingContext.isTexture() method of the WebGL API returns true if the passed WebGLTexture is valid and false otherwise.
9
12
4
5.1
25
8
lineWidth

The WebGLRenderingContext.lineWidth() method of the WebGL API sets the line width of rasterized lines.
9
12
4
5.1
25
8
linkProgram

The WebGLRenderingContext interface's linkProgram() method links a given WebGLProgram, completing the process of preparing the GPU code for the program's fragment and vertex shaders.
9
12
4
5.1
25
8
pixelStorei

The WebGLRenderingContext.pixelStorei() method of the WebGL API specifies the pixel storage modes.
9
12
4
5.1
25
8
polygonOffset

The WebGLRenderingContext.polygonOffset() method of the WebGL API specifies the scale factors and units to calculate depth values.
9
12
4
5.1
25
8
readPixels

The WebGLRenderingContext.readPixels() method of the WebGL API reads a block of pixels from a specified rectangle of the current color framebuffer into a TypedArray or a DataView object.
9
12
4
5.1
25
8
renderbufferStorage

The WebGLRenderingContext.renderbufferStorage() method of the WebGL API creates and initializes a renderbuffer object's data store.
9
12
4
5.1
25
8
sampleCoverage

The WebGLRenderingContext.sampleCoverage() method of the WebGL API specifies multi-sample coverage parameters for anti-aliasing effects.
9
12
4
5.1
25
8
scissor

The WebGLRenderingContext.scissor() method of the WebGL API sets a scissor box, which limits the drawing to a specified rectangle.
9
12
4
5.1
25
8
shaderSource

The WebGLRenderingContext.shaderSource() method of the WebGL API sets the source code of a WebGLShader.
9
12
4
5.1
25
8
stencilFunc

The WebGLRenderingContext.stencilFunc() method of the WebGL API sets the front and back function and reference value for stencil testing.
9
12
4
5.1
25
8
stencilFuncSeparate

The WebGLRenderingContext.stencilFuncSeparate() method of the WebGL API sets the front and/or back function and reference value for stencil testing.
9
12
4
5.1
25
8
stencilMask

The WebGLRenderingContext.stencilMask() method of the WebGL API controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.
9
12
4
5.1
25
8
stencilMaskSeparate

The WebGLRenderingContext.stencilMaskSeparate() method of the WebGL API controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.
9
12
4
5.1
25
8
stencilOp

The WebGLRenderingContext.stencilOp() method of the WebGL API sets both the front and back-facing stencil test actions.
9
12
4
5.1
25
8
stencilOpSeparate

The WebGLRenderingContext.stencilOpSeparate() method of the WebGL API sets the front and/or back-facing stencil test actions.
9
12
4
5.1
25
8
texImage2D

The texImage2D() method of the WebGLRenderingContext interface of the WebGL API specifies a two-dimensional texture image.
9
12
4
5.1
25
8
texParameterf

The WebGLRenderingContext.texParameter[fi]() methods of the WebGL API set texture parameters.
9
12
4
5.1
25
8
texParameteri

The WebGLRenderingContext.texParameter[fi]() methods of the WebGL API set texture parameters.
9
12
4
5.1
25
8
texSubImage2D

The texSubImage2D() method of the WebGLRenderingContext interface of the WebGL API specifies a two-dimensional sub-rectangle for a texture image.
9
12
4
5.1
25
8
uniform1f

The WebGLRenderingContext.uniform[1234][fi][v]() methods of the WebGL API specify values of uniform variables. All active uniform variables defined in a program object are initialized to 0 when the program object is linked successfully. They retain the values assigned to them by a call to this method until the next successful link operation occurs on the…
9
12
4
5.1
25
8
uniform1fv

The WebGLRenderingContext.uniform[1234][fi][v]() methods of the WebGL API specify values of uniform variables. All active uniform variables defined in a program object are initialized to 0 when the program object is linked successfully. They retain the values assigned to them by a call to this method until the next successful link operation occurs on the…
9
12
4
5.1
25
8
uniform1i

The WebGLRenderingContext.uniform[1234][fi][v]() methods of the WebGL API specify values of uniform variables. All active uniform variables defined in a program object are initialized to 0 when the program object is linked successfully. They retain the values assigned to them by a call to this method until the next successful link operation occurs on the…
9
12
4
5.1
25
8
uniform1iv

The WebGLRenderingContext.uniform[1234][fi][v]() methods of the WebGL API specify values of uniform variables. All active uniform variables defined in a program object are initialized to 0 when the program object is linked successfully. They retain the values assigned to them by a call to this method until the next successful link operation occurs on the…
9
12
4
5.1
25
8
uniform2f

The WebGLRenderingContext.uniform[1234][fi][v]() methods of the WebGL API specify values of uniform variables. All active uniform variables defined in a program object are initialized to 0 when the program object is linked successfully. They retain the values assigned to them by a call to this method until the next successful link operation occurs on the…
9
12
4
5.1
25
8
uniform2fv

The WebGLRenderingContext.uniform[1234][fi][v]() methods of the WebGL API specify values of uniform variables. All active uniform variables defined in a program object are initialized to 0 when the program object is linked successfully. They retain the values assigned to them by a call to this method until the next successful link operation occurs on the…
9
12
4
5.1
25
8
uniform2i

The WebGLRenderingContext.uniform[1234][fi][v]() methods of the WebGL API specify values of uniform variables. All active uniform variables defined in a program object are initialized to 0 when the program object is linked successfully. They retain the values assigned to them by a call to this method until the next successful link operation occurs on the…
9
12
4
5.1
25
8
uniform2iv

The WebGLRenderingContext.uniform[1234][fi][v]() methods of the WebGL API specify values of uniform variables. All active uniform variables defined in a program object are initialized to 0 when the program object is linked successfully. They retain the values assigned to them by a call to this method until the next successful link operation occurs on the…
9
12
4
5.1
25
8
uniform3f

The WebGLRenderingContext.uniform[1234][fi][v]() methods of the WebGL API specify values of uniform variables. All active uniform variables defined in a program object are initialized to 0 when the program object is linked successfully. They retain the values assigned to them by a call to this method until the next successful link operation occurs on the…
9
12
4
5.1
25
8
uniform3fv

The WebGLRenderingContext.uniform[1234][fi][v]() methods of the WebGL API specify values of uniform variables. All active uniform variables defined in a program object are initialized to 0 when the program object is linked successfully. They retain the values assigned to them by a call to this method until the next successful link operation occurs on the…
9
12
4
5.1
25
8
uniform3i

The WebGLRenderingContext.uniform[1234][fi][v]() methods of the WebGL API specify values of uniform variables. All active uniform variables defined in a program object are initialized to 0 when the program object is linked successfully. They retain the values assigned to them by a call to this method until the next successful link operation occurs on the…
9
12
4
5.1
25
8
uniform3iv

The WebGLRenderingContext.uniform[1234][fi][v]() methods of the WebGL API specify values of uniform variables. All active uniform variables defined in a program object are initialized to 0 when the program object is linked successfully. They retain the values assigned to them by a call to this method until the next successful link operation occurs on the…
9
12
4
5.1
25
8
uniform4f

The WebGLRenderingContext.uniform[1234][fi][v]() methods of the WebGL API specify values of uniform variables. All active uniform variables defined in a program object are initialized to 0 when the program object is linked successfully. They retain the values assigned to them by a call to this method until the next successful link operation occurs on the…
9
12
4
5.1
25
8
uniform4fv

The WebGLRenderingContext.uniform[1234][fi][v]() methods of the WebGL API specify values of uniform variables. All active uniform variables defined in a program object are initialized to 0 when the program object is linked successfully. They retain the values assigned to them by a call to this method until the next successful link operation occurs on the…
9
12
4
5.1
25
8
uniform4i

The WebGLRenderingContext.uniform[1234][fi][v]() methods of the WebGL API specify values of uniform variables. All active uniform variables defined in a program object are initialized to 0 when the program object is linked successfully. They retain the values assigned to them by a call to this method until the next successful link operation occurs on the…
9
12
4
5.1
25
8
uniform4iv

The WebGLRenderingContext.uniform[1234][fi][v]() methods of the WebGL API specify values of uniform variables. All active uniform variables defined in a program object are initialized to 0 when the program object is linked successfully. They retain the values assigned to them by a call to this method until the next successful link operation occurs on the…
9
12
4
5.1
25
8
uniformMatrix2fv

The WebGLRenderingContext.uniformMatrix[234]fv() methods of the WebGL API specify matrix values for uniform variables.
9
12
4
5.1
25
8
uniformMatrix3fv

The WebGLRenderingContext.uniformMatrix[234]fv() methods of the WebGL API specify matrix values for uniform variables.
9
12
4
5.1
25
8
uniformMatrix4fv

The WebGLRenderingContext.uniformMatrix[234]fv() methods of the WebGL API specify matrix values for uniform variables.
9
12
4
5.1
25
8
useProgram

The WebGLRenderingContext.useProgram() method of the WebGL API sets the specified WebGLProgram as part of the current rendering state.
9
12
4
5.1
25
8
validateProgram

The WebGLRenderingContext.validateProgram() method of the WebGL API validates a WebGLProgram. It checks if it is successfully linked and if it can be used in the current WebGL state.
9
12
4
5.1
25
8
vertexAttrib1f

The WebGLRenderingContext.vertexAttrib[1234]f[v]() methods of the WebGL API specify constant values for generic vertex attributes.
9
12
4
5.1
25
8
vertexAttrib1fv

The WebGLRenderingContext.vertexAttrib[1234]f[v]() methods of the WebGL API specify constant values for generic vertex attributes.
9
12
4
5.1
25
8
vertexAttrib2f

The WebGLRenderingContext.vertexAttrib[1234]f[v]() methods of the WebGL API specify constant values for generic vertex attributes.
9
12
4
5.1
25
8
vertexAttrib2fv

The WebGLRenderingContext.vertexAttrib[1234]f[v]() methods of the WebGL API specify constant values for generic vertex attributes.
9
12
4
5.1
25
8
vertexAttrib3f

The WebGLRenderingContext.vertexAttrib[1234]f[v]() methods of the WebGL API specify constant values for generic vertex attributes.
9
12
4
5.1
25
8
vertexAttrib3fv

The WebGLRenderingContext.vertexAttrib[1234]f[v]() methods of the WebGL API specify constant values for generic vertex attributes.
9
12
4
5.1
25
8
vertexAttrib4f

The WebGLRenderingContext.vertexAttrib[1234]f[v]() methods of the WebGL API specify constant values for generic vertex attributes.
9
12
4
5.1
25
8
vertexAttrib4fv

The WebGLRenderingContext.vertexAttrib[1234]f[v]() methods of the WebGL API specify constant values for generic vertex attributes.
9
12
4
5.1
25
8
vertexAttribPointer

The WebGLRenderingContext.vertexAttribPointer() method of the WebGL API binds the buffer currently bound to gl.ARRAY_BUFFER to a generic vertex attribute of the current vertex buffer object and specifies its layout.
9
12
4
5.1
25
8
viewport

The WebGLRenderingContext.viewport() method of the WebGL API sets the viewport, which specifies the affine transformation of x and y from normalized device coordinates to window coordinates.
9
12
4
5.1
25
8
worker_support
Experimental

Available in workers
105
WebGLShader

The WebGLShader is part of the WebGL API and can either be a vertex or a fragment shader. A WebGLProgram requires both types of shaders.
10
12
4
5.1
25
8
worker_support
Experimental

Available in workers
105
WebGLShaderPrecisionFormat

The WebGLShaderPrecisionFormat interface is part of the WebGL API and represents the information returned by calling the WebGLRenderingContext.getShaderPrecisionFormat() method.
9
12
4
5.1
25
8
precision

The read-only WebGLShaderPrecisionFormat.precision property returns the number of bits of precision that can be represented.
9
12
4
5.1
25
8
rangeMax

The read-only WebGLShaderPrecisionFormat.rangeMax property returns the base 2 log of the absolute value of the maximum value that can be represented.
9
12
4
5.1
25
8
rangeMin

The read-only WebGLShaderPrecisionFormat.rangeMin property returns the base 2 log of the absolute value of the minimum value that can be represented.
9
12
4
5.1
25
8
worker_support
Experimental

Available in workers
105
WebGLTexture

The WebGLTexture interface is part of the WebGL API and represents an opaque texture object providing storage and state for texturing operations.
10
12
4
5.1
25
8
worker_support
Experimental

Available in workers
105
WebGLUniformLocation

The WebGLUniformLocation interface is part of the WebGL API and represents the location of a uniform variable in a shader program.
10
12
4
5.1
25
8
worker_support
Experimental

Available in workers
105
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: experimental-webgl (9)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: experimental-webgl (12)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: experimental-webgl (3.6)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: experimental-webgl (5.1)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: experimental-webgl (18)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: experimental-webgl (8)
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Chrome respects the GPU hint on macOS only.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Edge respects the GPU hint on macOS only.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Firefox respects the GPU hint on macOS only.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Chrome Android respects the GPU hint on macOS only.
Notes 1 item(s)
Implementation note
  • To access the WebGL context, use `experimental-webgl` rather than the standard `webgl` identifier.

Syntax

JAVASCRIPT 
<canvas id="gl" width="400" height="300"></canvas>
<script>
const gl = document.getElementById('gl').getContext('webgl');
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
</script>

Live demo

WebGL clear color

Create a WebGL context and clear the canvas with a chosen color.

PreviewFullscreen

Interactive clear color

Map UI controls to WebGL clearColor values and redraw the scene.

PreviewFullscreen

Support checklist

Present a quick checklist next to the rendered WebGL surface.

PreviewFullscreen

Use cases

  • 3D scenes

    Product viewers, diagrams, and interactive simulations often rely on WebGL for depth and smooth transforms.

  • High-volume visuals

    Particle systems, large maps, and shader-based effects benefit from GPU rendering in ways DOM layout cannot match.

Cautions

  • Rendering pipelines, state management, and device differences add significant complexity compared with normal UI code.
  • Always plan for fallback behavior when graphics acceleration is unavailable or intentionally disabled.

Accessibility

  • Important information shown inside WebGL scenes needs an alternative description or complementary UI outside the canvas.
  • Camera movement, drag interaction, and animation should not be the only way to understand or control the feature.

Related links

Powered by web-features