recursal/MDN huggingface dataset:
WebGLRenderingContext: uniform[1234][fi][v]() method
====================================================

 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 program
 object, when they are once again initialized to 0.


**Note:** Many of the functions described here have expanded WebGL 2 interfaces, which can be
 found under
 `WebGL2RenderingContext.uniform[1234][uif][v]()`.


Syntax
------


```js
uniform1f(location, v0)
uniform1fv(location, value)
uniform1i(location, v0)
uniform1iv(location, value)

uniform2f(location, v0, v1)
uniform2fv(location, value)
uniform2i(location, v0, v1)
uniform2iv(location, value)

uniform3f(location, v0, v1, v2)
uniform3fv(location, value)
uniform3i(location, v0, v1, v2)
uniform3iv(location, value)

uniform4f(location, v0, v1, v2, v3)
uniform4fv(location, value)
uniform4i(location, v0, v1, v2, v3)
uniform4iv(location, value)
```

### Parameters

`location`

 A `WebGLUniformLocation` object containing the location of the uniform
 attribute to modify.


`value, v0, v1, v2, v3`

A new value to be used for the uniform variable. Possible types:

* A floating point `Number` for floating point values (methods with
 "f").
* A sequence of floating point numbers (for example a `Float32Array`
 or an `Array` of numbers) for floating point vector methods (methods
 with "fv").
* An integer `Number` for integer values (methods with "i").
* An `Int32Array` for integer vector methods (methods with "iv").

### Return value

None (`undefined`).

Examples
--------


```js
gl.uniform1f(u_alpha, 0.8);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.10 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.uniformMatrix()`
WebGLRenderingContext: getRenderbufferParameter() method
========================================================

 The **`WebGLRenderingContext.getRenderbufferParameter()`**
 method of the WebGL API returns information
 about the renderbuffer.

Syntax
------


```js
getRenderbufferParameter(target, pname)
```

### Parameters

`target`

A `GLenum` specifying the target renderbuffer object. Possible values:

`gl.RENDERBUFFER`

 Buffer data storage for single images in a
 renderable internal format.



`pname`

A `GLenum` specifying the information to query. Possible values:

`gl.RENDERBUFFER_WIDTH`

 Returns a `GLint` indicating
 the width of the image of the currently bound renderbuffer.


`gl.RENDERBUFFER_HEIGHT`

 Returns a `GLint` indicating
 the height of the image of the currently bound renderbuffer.


`gl.RENDERBUFFER_INTERNAL_FORMAT`

 Returns a `GLenum`
 indicating the internal format of the currently bound renderbuffer. The default is
 `gl.RGBA4`. Possible return values:


* `gl.RGBA4`: 4 red bits, 4 green bits, 4 blue bits 4 alpha bits.
* `gl.RGB565`: 5 red bits, 6 green bits, 5 blue bits.
* `gl.RGB5_A1`: 5 red bits, 5 green bits, 5 blue bits, 1 alpha bit.
* `gl.DEPTH_COMPONENT16`: 16 depth bits.
* `gl.STENCIL_INDEX8`: 8 stencil bits.

`gl.RENDERBUFFER_GREEN_SIZE`

 Returns a `GLint` that is
 the resolution size (in bits) for the green color.


`gl.RENDERBUFFER_BLUE_SIZE`

 Returns a `GLint` that is
 the resolution size (in bits) for the blue color.


`gl.RENDERBUFFER_RED_SIZE`

 Returns a `GLint` that is
 the resolution size (in bits) for the red color.


`gl.RENDERBUFFER_ALPHA_SIZE`

 Returns a `GLint` that is
 the resolution size (in bits) for the alpha component.


`gl.RENDERBUFFER_DEPTH_SIZE`

 Returns a `GLint` that is
 the resolution size (in bits) for the depth component.


`gl.RENDERBUFFER_STENCIL_SIZE`

 Returns a `GLint` that
 is the resolution size (in bits) for the stencil component.



 When using a WebGL 2 context,
 the following value is available additionally:


`gl.RENDERBUFFER_SAMPLES`

 Returns a `GLint`
 indicating the number of samples of the image of the currently bound
 renderbuffer.



### Return value

 Depends on the requested information (as specified with `pname`). Either a
 `GLint` or a `GLenum`.

Examples
--------


```js
gl.getRenderbufferParameter(gl.RENDERBUFFER, gl.RENDERBUFFER\_WIDTH);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.7 |
| WebGL 2.0 Specification # 3.7.5 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.bindRenderbuffer()`
* `WebGLRenderingContext.createRenderbuffer()`
* `WebGLRenderingContext.deleteRenderbuffer()`
* `WebGLRenderingContext.renderbufferStorage()`
* Other buffers: `WebGLBuffer`, `WebGLFramebuffer`
WebGLRenderingContext: attachShader() method
============================================

 The **WebGLRenderingContext.attachShader()** method of the WebGL API attaches either a fragment or
 vertex `WebGLShader` to a `WebGLProgram`.

Syntax
------


```js
attachShader(program, shader)
```

### Parameters

`program`

A `WebGLProgram`.

`shader`

A fragment or vertex `WebGLShader`.

Examples
--------

The following code attaches pre-existing shaders to a `WebGLProgram`.


```js
const program = gl.createProgram();

// Attach pre-existing shaders
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK\_STATUS)) {
  const info = gl.getProgramInfoLog(program);
  throw `Could not compile WebGL program. \n\n${info}`;
}
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.9 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLProgram`
* `WebGLShader`
* `WebGLRenderingContext.attachShader()`
* `WebGLRenderingContext.compileShader()`
* `WebGLRenderingContext.createProgram()`
* `WebGLRenderingContext.createShader()`
* `WebGLRenderingContext.deleteProgram()`
* `WebGLRenderingContext.deleteShader()`
* `WebGLRenderingContext.detachShader()`
* `WebGLRenderingContext.getAttachedShaders()`
* `WebGLRenderingContext.getProgramParameter()`
* `WebGLRenderingContext.getProgramInfoLog()`
* `WebGLRenderingContext.getShaderParameter()`
* `WebGLRenderingContext.getShaderPrecisionFormat()`
* `WebGLRenderingContext.getShaderInfoLog()`
* `WebGLRenderingContext.getShaderSource()`
* `WebGLRenderingContext.isProgram()`
* `WebGLRenderingContext.isShader()`
* `WebGLRenderingContext.linkProgram()`
* `WebGLRenderingContext.shaderSource()`
* `WebGLRenderingContext.useProgram()`
* `WebGLRenderingContext.validateProgram()`
WebGLRenderingContext: uniformMatrix[234]fv() method
====================================================

 The **`WebGLRenderingContext.uniformMatrix[234]fv()`** methods
 of the WebGL API specify matrix values for
 uniform variables.

 The three versions of this method (`uniformMatrix2fv()`,
 `uniformMatrix3fv()`, and `uniformMatrix4fv()`) take as the input
 value 2-component, 3-component, and 4-component square matrices, respectively. They are
 expected to have 4, 9 or 16 floats.

Syntax
------


```js
uniformMatrix2fv(location, transpose, value)
uniformMatrix3fv(location, transpose, value)
uniformMatrix4fv(location, transpose, value)
```

### Parameters

`location`

 A `WebGLUniformLocation` object containing the location of the uniform
 attribute to modify. The location is obtained using
 `getUniformLocation()`.


`transpose`

 A `GLboolean` specifying whether to transpose the matrix. Must be
 `false`.


`value`

 A `Float32Array` or sequence of `GLfloat` values. The values
 are assumed to be supplied in column major order.


### Return value

None (`undefined`).

Examples
--------


```js
gl.uniformMatrix2fv(loc, false, [2, 1, 2, 2]);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.10 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.uniform()`
* `WebGL2RenderingContext.uniformMatrix()` – WebGL 2 versions of these
 methods.
WebGLRenderingContext: getContextAttributes() method
====================================================

 The **`WebGLRenderingContext.getContextAttributes()`** method
 returns a `WebGLContextAttributes` object that contains the actual context
 parameters. Might return `null`, if the context is lost.

Syntax
------


```js
getContextAttributes()
```

### Parameters

None.

### Return value

 A `WebGLContextAttributes` object that contains the actual context
 parameters, or `null` if the context is lost.

Examples
--------

Given this `<canvas>` element


```html
<canvas id="canvas"></canvas>
```


and given this WebGL context


```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
gl.getContextAttributes();
```


 the `getContextAttributes` method returns an object that describes the
 attributes set on this context, for example:


```js
{
  alpha: true,
  antialias: true,
  depth: true,
  failIfMajorPerformanceCaveat: false,
  powerPreference: "default",
  premultipliedAlpha: true,
  preserveDrawingBuffer: false,
  stencil: false,
  desynchronized: false
}
```


 The context attributes can be set when creating the context using the
 `HTMLCanvasElement.getContext()` method:


```js
canvas.getContext("webgl", { antialias: false, depth: false });
```


 See `getContext()` for more information
 about the individual attributes.

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.2 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `HTMLCanvasElement.getContext()`
* `CanvasRenderingContext2D.getContextAttributes()`
WebGLRenderingContext: clearColor() method
==========================================

 The **`WebGLRenderingContext.clearColor()`** method of the WebGL API specifies the color values used
 when clearing color buffers.

 This specifies what color values to use when calling the
 `clear()` method. The values are clamped
 between 0 and 1.

Syntax
------


```js
clearColor(red, green, blue, alpha)
```

### Parameters

`red`

 A `GLclampf` specifying the red color value used when the color buffers
 are cleared. Default value: 0.


`green`

 A `GLclampf` specifying the green color value used when the color
 buffers are cleared. Default value: 0.


`blue`

 A `GLclampf` specifying the blue color value used when the color
 buffers are cleared. Default value: 0.


`alpha`

 A `GLclampf` specifying the alpha (transparency) value used when the
 color buffers are cleared. Default value: 0.


### Return value

None (`undefined`).

Examples
--------


```js
gl.clearColor(1, 0.5, 0.5, 3);
```


 To get the current clear color, query the `COLOR_CLEAR_VALUE` constant which
 returns a `Float32Array`.


```js
gl.getParameter(gl.COLOR\_CLEAR\_VALUE);
// Float32Array[1, 0.5, 0.5, 1]
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.3 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.clear()`
* `WebGLRenderingContext.clearDepth()`
* `WebGLRenderingContext.clearStencil()`
WebGLRenderingContext: drawElements() method
============================================

The **`WebGLRenderingContext.drawElements()`** method of the WebGL API renders primitives from array data.

Syntax
------


```js
drawElements(mode, count, type, offset)
```

### Parameters

`mode`

 A `GLenum` specifying the type primitive to render. Possible values
 are:


* `gl.POINTS`: Draws a single dot.
* `gl.LINE_STRIP`: Draws a straight line to the next vertex.
* `gl.LINE_LOOP`: Draws a straight line to the next vertex, and
 connects the last vertex back to the first.
* `gl.LINES`: Draws a line between a pair of vertices.
* `gl.TRIANGLE_STRIP`
* `gl.TRIANGLE_FAN`
* `gl.TRIANGLES`: Draws a triangle for a group of three vertices.

`count`

 A `GLsizei` specifying the number of elements of the bound element array
 buffer to be rendered. For example, to draw a wireframe triangle with `gl.LINES`
 the count should be 2 endpoints per line × 3 lines = 6 elements. However to draw the
 same wireframe triangle with `gl.LINE_STRIP` the element array buffer does not
 repeat the indices for the end of the first line/start of the second line, and end of the
 second line/start of the third line, so `count` will be four. To draw the same
 triangle with `gl.LINE_LOOP` the element array buffer does not repeat the
 first/last vertex either so `count` will be three.


`type`

 A `GLenum` specifying the type of the values in the element array
 buffer. Possible values are:


* `gl.UNSIGNED_BYTE`
* `gl.UNSIGNED_SHORT`

When using the `OES_element_index_uint` extension:

* `gl.UNSIGNED_INT`

`offset`

 A `GLintptr` specifying a byte offset in the element array buffer. Must
 be a valid multiple of the size of the given `type`.


### Return value

None (`undefined`).

### Exceptions

* If `mode` is not one of the accepted values, a
 `gl.INVALID_ENUM` error is thrown.
* If `offset` is not a valid multiple of the size of the given type, a
 `gl.INVALID_OPERATION` error is thrown.
* If `count` is negative, a `gl.INVALID_VALUE` error is thrown.
Examples
--------


```js
gl.drawElements(gl.POINTS, 8, gl.UNSIGNED\_BYTE, 0);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.11 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.drawArrays()`
* `OES_element_index_uint`
* `WEBGL_multi_draw.multiDrawElementsWEBGL()`
WebGLRenderingContext: getVertexAttrib() method
===============================================

 The **`WebGLRenderingContext.getVertexAttrib()`** method of the
 WebGL API returns information about a vertex
 attribute at a given position.

Syntax
------


```js
getVertexAttrib(index, pname)
```

### Parameters

`index`

A `GLuint` specifying the index of the vertex attribute.

`pname`

A `GLenum` specifying the information to query. Possible values:

`gl.VERTEX_ATTRIB_ARRAY_BUFFER_BINDING`

Returns the currently bound `WebGLBuffer`.

`gl.VERTEX_ATTRIB_ARRAY_ENABLED`

Returns a `GLboolean` that is `true` if the vertex attribute is enabled at this `index`. Otherwise `false`.

`gl.VERTEX_ATTRIB_ARRAY_SIZE`

 Returns a `GLint`
 indicating the size of an element of the vertex array.


`gl.VERTEX_ATTRIB_ARRAY_STRIDE`

 Returns a `GLint`
 indicating the number of bytes between successive elements in the array. 0 means
 that the elements are sequential.


`gl.VERTEX_ATTRIB_ARRAY_TYPE`

 Returns a `GLenum`
 representing the array type. One of


* `gl.BYTE`
* `gl.UNSIGNED_BYTE`
* `gl.SHORT`,
* `gl.UNSIGNED_SHORT`
* `gl.FLOAT`

`gl.VERTEX_ATTRIB_ARRAY_NORMALIZED`

 Returns a
 `GLboolean` that is true if fixed-point data types are normalized for
 the vertex attribute array at the given `index`.


`gl.CURRENT_VERTEX_ATTRIB`

 Returns a `Float32Array`
 (with 4 elements) representing the current value of the vertex attribute at the
 given `index`.



 When using a WebGL 2 context,
 the following values are available additionally:


`gl.VERTEX_ATTRIB_ARRAY_INTEGER`

 Returns a
 `GLboolean` indicating whether an integer data type is in
 the vertex attribute array at the given `index`.


`gl.VERTEX_ATTRIB_ARRAY_DIVISOR`

 Returns a `GLint`
 describing the frequency divisor used for instanced rendering.


When using the `ANGLE_instanced_arrays` extension:

`ext.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE`

 Returns a
 `GLint` describing the frequency divisor used for instanced
 rendering.



### Return value

 Returns the requested vertex attribute information (as specified with
 `pname`).

Examples
--------


```js
gl.getVertexAttrib(0, gl.VERTEX\_ATTRIB\_ARRAY\_BUFFER\_BINDING);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.10 |
| WebGL 2.0 Specification # 3.7.8 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.getVertexAttribOffset()`
* `ANGLE_instanced_arrays`
WebGLRenderingContext: blendEquationSeparate() method
=====================================================

 The **`WebGLRenderingContext.blendEquationSeparate()`** method
 of the WebGL API is used to set the RGB
 blend equation and alpha blend equation separately.

 The blend equation determines how a new pixel is combined with a pixel already in the
 `WebGLFramebuffer`.

Syntax
------


```js
blendEquationSeparate(modeRGB, modeAlpha)
```

### Parameters

`modeRGB`

 A `GLenum` specifying how the red, green and blue components of source
 and destination colors are combined. Must be either:


* `gl.FUNC_ADD`: source + destination (default value),
* `gl.FUNC_SUBTRACT`: source - destination,
* `gl.FUNC_REVERSE_SUBTRACT`: destination - source,
* When using the `EXT_blend_minmax` extension:
    + `ext.MIN_EXT`: Minimum of source and destination,
    + `ext.MAX_EXT`: Maximum of source and destination.
* When using a WebGL 2 context,
 the following values are available additionally:
    + `gl.MIN`: Minimum of source and destination,
    + `gl.MAX`: Maximum of source and destination.

`modeAlpha`

 A `GLenum` specifying how the alpha component (transparency) of source
 and destination colors are combined. Must be either:


* `gl.FUNC_ADD`: source + destination (default value),
* `gl.FUNC_SUBTRACT`: source - destination,
* `gl.FUNC_REVERSE_SUBTRACT`: destination - source,
* When using the `EXT_blend_minmax` extension:
    + `ext.MIN_EXT`: Minimum of source and destination,
    + `ext.MAX_EXT`: Maximum of source and destination.
* When using a WebGL 2 context,
 the following values are available additionally:
    + `gl.MIN`: Minimum of source and destination,
    + `gl.MAX`: Maximum of source and destination.

### Return value

None (`undefined`).

### Exceptions

 If *mode* is not one of the three possible values, a
 `gl.INVALID_ENUM` error is thrown.

Examples
--------

To set the blend equations, use:


```js
gl.blendEquationSeparate(gl.FUNC\_ADD, gl.FUNC\_SUBTRACT);
```


 To get the current blend equations, query the `BLEND_EQUATION`,
 `BLEND_EQUATION_RGB` and `BLEND_EQUATION_ALPHA` constants which
 return `gl.FUNC_ADD`, `gl.FUNC_SUBTRACT`,
 `gl.FUNC_REVERSE_SUBTRACT`, or if the `EXT_blend_minmax` is
 enabled: `ext.MIN_EXT` or `ext.MAX_EXT`.


```js
gl.getParameter(gl.BLEND\_EQUATION\_RGB) === gl.FUNC\_ADD;
// true

gl.getParameter(gl.BLEND\_EQUATION\_ALPHA) === gl.FUNC\_ADD;
// true
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.3 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.blendEquation()`
* `WebGLRenderingContext.blendColor()`
* `WebGLRenderingContext.blendFunc()`
* `EXT_blend_minmax`
WebGLRenderingContext: canvas property
======================================

 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.

Syntax
------


```js
gl.canvas
```

### Return value

 Either a `HTMLCanvasElement` or `OffscreenCanvas` object or
 `null`.

Examples
--------

### Canvas element

Given this `<canvas>` element:


```html
<canvas id="canvas"></canvas>
```


 You can get back a reference to it from the `WebGLRenderingContext` using
 the `canvas` property:


```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
gl.canvas; // HTMLCanvasElement
```

### Offscreen canvas

Example using the experimental `OffscreenCanvas` object.


```js
const offscreen = new OffscreenCanvas(256, 256);
const gl = offscreen.getContext("webgl");
gl.canvas; // OffscreenCanvas
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # DOM-WebGLRenderingContext-canvas |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `CanvasRenderingContext2D.canvas`
* The `OffscreenCanvas` interface
WebGLRenderingContext: getShaderSource() method
===============================================

 The **`WebGLRenderingContext.getShaderSource()`** method of the
 WebGL API returns the source code of a
 `WebGLShader` as a string.

Syntax
------


```js
getShaderSource(shader)
```

### Parameters

`shader`

A `WebGLShader` object to get the source code from.

### Return value

A string containing the source code of the shader.

Examples
--------


```js
const shader = gl.createShader(gl.VERTEX\_SHADER);
gl.shaderSource(shader, originalSource);

const source = gl.getShaderSource(shader);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.9 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.createShader()`
* `WebGLRenderingContext.isShader()`
* `WebGLRenderingContext.deleteShader()`
WebGLRenderingContext: colorMask() method
=========================================

 The **`WebGLRenderingContext.colorMask()`** method of the WebGL API sets which color components to
 enable or to disable when drawing or rendering to a `WebGLFramebuffer`.

Syntax
------


```js
colorMask(red, green, blue, alpha)
```

### Parameters

`red`

 A `GLboolean` specifying whether or not the red color component can be
 written into the frame buffer. Default value: `true`.


`green`

 A `GLboolean` specifying whether or not the green color component can
 be written into the frame buffer. Default value: `true`.


`blue`

 A `GLboolean` specifying whether or not the blue color component can be
 written into the frame buffer. Default value: `true`.


`alpha`

 A `GLboolean` specifying whether or not the alpha (transparency)
 component can be written into the frame buffer. Default value: `true`.


### Return value

None (`undefined`).

Examples
--------


```js
gl.colorMask(true, true, true, false);
```


 To get the current color mask, query the `COLOR_WRITEMASK` constant which
 returns an `Array`.


```js
gl.getParameter(gl.COLOR\_WRITEMASK);
// [true, true, true, false]
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.3 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.depthMask()`
* `WebGLRenderingContext.stencilMask()`