JavaScript WebGLRenderingContext : Object

The WebGLRenderingContext is an object that is used to issue WebGL rendering commands to a canvas. The WebGLRenderingContext is obtained by passing 'webgl' to the HTMLCanvasElement.getContext() method. See WebGLContextAttributes for configuration options you can specify when calling getContext().

For detailed information on the shader language used by WebGL, see the GLSL Specification.

While developing with WebGL, you can use the debug context to easily find errors in your code. The samples below use the debug context to help catch errors but you should remove it in production code. See http://www.khronos.org/webgl/wiki/Debugging for more details.

Spec

Instance Properties

canvas : HTMLCanvasElement readonly

The canvas that owns this WebGL context.

Example:

<canvas id='canvas'></canvas>
<script src='/webgl-debug.js'></script>
<script>
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext('webgl');
  gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code 
  
  console.log(gl.canvas === canvas);
</script>

Run

Results:

Spec

drawingBufferHeight : Number readonly

Returns the height of the owner canvas in pixels.

Example:

<canvas id='canvas' width='150' height='75'></canvas>
<script src='/webgl-debug.js'></script>
<script>
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext('webgl');
  gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code
  
  console.log(gl.drawingBufferHeight);
</script>

Run

Results:

drawingBufferWidth : Number readonly

Returns the width of the owner canvas in pixels.

Example:

<canvas id='canvas' width='150' height='75'></canvas>
<script src='/webgl-debug.js'></script>
<script>
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext('webgl');
  gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code
  
  console.log(gl.drawingBufferWidth);
</script>

Run

Results:

Instance Methods

activeTexture(unit : Number) : undefined

Set the texture unit subsequent texture operations apply to.

unit: must be one of TEXTURE0, TEXTURE1, to getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS) - 1.

The default value is TEXTURE0. A texture must be bound to the active texture unit using bindTexture().

Spec

attachShader(program : WebGLProgram, shader : WebGLShader) : undefined

Attaches shader to program. A program must have both a VERTEX_SHADER and FRAGMENT_SHADER before it can be used. shader can be attached before its souce has been set. See also detachShader().

Example:

<canvas id='canvas' width='100' height='100'></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec2 vertexPosition;

  void main() {
    gl_Position = vec4(vertexPosition, 0.0, 1.0);
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  void main() {
    gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); // green
  }
</script>
<script src='/webgl-debug.js'></script>
<script>
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext('webgl');
  gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

  // Create Vertex Shader
  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, document.getElementById('vertexShader').textContent);
  gl.compileShader(vertexShader);

  // Create Fragment Shader
  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, document.getElementById('fragmentShader').textContent);
  gl.compileShader(fragmentShader);

  // Create Shader Program
  var program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  gl.useProgram(program);

  // Create a buffer with 3 points to form a triangle
  var triangleBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, triangleBuffer);
  var vertices = [
    -0.5,  -0.5,
     0.5,  -0.5,
     0.0,   0.5];
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

  // Bind the triangles to the vertex shader's 'vertexPosition' attribute and draw it
  var vertexPositionLocation = gl.getAttribLocation(program, 'vertexPosition');
  gl.vertexAttribPointer(vertexPositionLocation, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(vertexPositionLocation);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
</script>

Run

Results:

Spec

bindAttribLocation(program : WebGLProgram, location : Number, attributeName : String) : undefined

Associates a number (location) with an attribute (a shader input such as vertex position) in program. Other webgl functions (such as enableVertexAttribArray() or vertexAttribPointer()) deal with an attribute location number instead of the name used in the program and bindAttribLocation is used to choose the number used for that attribute. Locations are automatically assigned if you do not call bindAttribLocation so this method is only necessary if you wish to assign a specific location for an attribute. Use getAttribLocation() to retrieve the automatically assigned location. bindAttribLocation() must be called before calling linkProgram(program) and location must be an integer in the range 0 to getParameter(gl.MAX_VERTEX_ATTRIBS) - 1.

Example:

<!-- Demonstrates binding the 'vertexPosition' attribute to a 
     fixed location (in this case 7) -->
<canvas id='canvas' width='100' height='100'></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec2 vertexPosition;

  void main() {
    gl_Position = vec4(vertexPosition, 0.0, 1.0);
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  void main() {
    gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); // green
  }
</script>
<script src='/webgl-debug.js'></script>
<script>
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext('webgl');
  gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

  // Create Vertex Shader
  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, document.getElementById('vertexShader').textContent);
  gl.compileShader(vertexShader);

  // Create Fragment Shader
  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, document.getElementById('fragmentShader').textContent);
  gl.compileShader(fragmentShader);

  // Create Shader Program
  var program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);

  // Bind the 'vertexPosition' attribute before linking
  var vertexPositionLocation = 7; 
  gl.bindAttribLocation(program, vertexPositionLocation, 'vertexPosition');
  
  gl.linkProgram(program);
  gl.useProgram(program);

  console.log('expected location: ' + vertexPositionLocation);

  vertexPositionLocation = gl.getAttribLocation(program, 'vertexPosition');
  console.log('actual location:   ' + vertexPositionLocation);

  // Create a buffer with 3 points to form a triangle
  var triangleBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, triangleBuffer);
  var vertices = [
    -0.5,  -0.5,
     0.5,  -0.5,
     0.0,   0.5];
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

  // Bind the triangles to the vertex shader's 'vertexPosition' attribute and draw it
  gl.vertexAttribPointer(vertexPositionLocation, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(vertexPositionLocation);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
</script>

Run

Results:

Spec

bindBuffer(target : Number, buffer : WebGLBuffer) : undefined

Sets the current buffer for target to buffer. target must be either ARRAY_BUFFER or ELEMENT_ARRAY_BUFFER. Use bufferData() to fill the bound buffer with data.

Spec

bindFramebuffer(target : Number, framebuffer : WebGLFramebuffer) : undefined

Sets the current framebuffer to framebuffer. target must be FRAMEBUFFER or null. If null, the rendering will go to the canvas. See createFramebuffer() for an example of using bindFramebuffer().

Spec

bindRenderbuffer(target : Number, renderbuffer : WebGLRenderbuffer) : undefined

Sets the current renderbuffer to renderbuffer. target must be RENDERBUFFER.

Spec

bindTexture(target : Number, texture : WebGLTexture) : undefined

Sets the specified target and texture (created with createTexture) for the bound texture in the active texture unit (set through activeTexture() and bindTexture()). target must be one of TEXTURE_2D or TEXTURE_CUBE_MAP

Spec

blendColor(red : Number, green : Number, blue : Number, alpha : Number) : undefined

Specifies the blend color used with blendFunc(). Each component must be in the range 0.0 to 1.0.

Spec

blendEquation(mode : Number) : undefined

Same as blendEquationSeparate(mode, mode).

Spec

blendEquationSeparate(modeRGB : Number, modeAlpha : Number) : undefined

Sets how the newly rendered pixel color and alpha (src) is combined with the existing framebuffer color and alpha (dst) before storing in the framebuffer.

modeRGB and modeAlpha: must be one of FUNC_ADD, FUNC_SUBTRACT, or FUNC_REVERSE_SUBTRACT.

If the mode is FUNC_ADD, the destination color will be src + dst. If the mode is FUNC_SUBTRACT, the destination color will be src - dst. If the mode is FUNC_REVERSE_SUBTRACT, the destination color will be dst - src. Both modeRGB and modeAlpha default to FUNC_ADD. Use getParameter(gl.BLEND_EQUATION_RGB) and getParameter(gl.BLEND_EQUATION_ALPHA) to get the current values. See blendFuncSeparate() for how src and dst are computed. Blending must be enabled with enable(BLEND).

Spec

blendFunc(srcFactor : Number, dstFactor : Number) : undefined

Same as blendFuncSeparate(srcFactor, dstFactor, srcFactor, dstFactor).

Spec

blendFuncSeparate(srcRGB : Number, dstRGB : Number, srcAlpha : Number, dstAlpha : Number) : undefined

Adjusts the newly rendered pixel color and alpha (src) and existing framebuffer color and alpha in the framebuffer (dst) before being combined using blendEquationSeparate().

srcRGB, dstRGB, srcAlpha, and dstAlpha: must be one of ZERO, ONE, SRC_COLOR, ONE_MINUS_SRC_COLOR, DST_COLOR, ONE_MINUS_DST_COLOR, SRC_ALPHA, ONE_MINUS_SRC_ALPHA, DST_ALPHA, ONE_MINUS_DST_ALPHA, CONSTANT_COLOR, ONE_MINUS_CONSTANT_COLOR, CONSTANT_ALPHA, ONE_MINUS_CONSTANT_ALPHA, or SRC_ALPHA_SATURATE

srcRGB and srcAlpha default to ONE. dstRGB and dstAlpha default to NONE.

For traditional alpha blending, use:
gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ZERO).

For premultiplied alpha blending, use:
gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ZERO).

Use getParameter(gl.BLEND_SRC_RGB), getParameter(gl.BLEND_DST_RGB), getParameter(gl.BLEND_SRC_ALPHA), and getParameter(gl.BLEND_DST_ALPHA) to get the current values.

Spec

bufferData 3 variants

bufferData(target : Number, data : ArrayBufferView, usage : Number) : undefined

Spec

bufferData(target : Number, data : ArrayBuffer, usage : Number) : undefined

Spec

bufferData(target : Number, size : Number, usage : Number) : undefined

Creates the storage for the currently bound buffer.

target: must be one of ARRAY_BUFFER or ELEMENT_ARRAY_BUFFER.
size: the size in bytes of the buffer to allocate.
usage: must be one of STREAM_DRAW, STATIC_DRAW, or DYNAMIC_DRAW.

Spec

bufferSubData 2 variants

bufferSubData(target : Number, offset : Number, data : ArrayBufferView) : undefined

Spec

bufferSubData(target : Number, offset : Number, data : ArrayBuffer) : undefined

Spec

checkFramebufferStatus(target : Number) : Number

Returns one of the following to indicate the current status of the framebuffer: FRAMEBUFFER_COMPLETE, FRAMEBUFFER_INCOMPLETE_ATTACHMENT, FRAMEBUFFER_INCOMPLETE_DIMENSIONS, FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT, or FRAMEBUFFER_UNSUPPORTED. target must be set to gl.FRAMEBUFFER.

Spec

clear(mask : Number) : undefined

Clears the buffers specified by mask where mask is the bitwise OR (|) of one or more of the following values: COLOR_BUFFER_BIT, STENCIL_BUFFER_BIT, and DEPTH_BUFFER_BIT.

Example:

<canvas id='canvas'></canvas>
<script src='/webgl-debug.js'></script>
<script>
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext('webgl');
  gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

  gl.clearColor(0, 1, 0, 1);
  gl.clearDepth(1);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
</script>

Run

Results:

Spec

clearColor(red : Number, green : Number, blue : Number, alpha : Number) : undefined

Specifies the color to fill the color buffer when clear() is called with the COLOR_BUFFER_BIT. The parameters are clamped to the range 0 to 1.

Example:

<canvas id='canvas'></canvas>
<script src='/webgl-debug.js'></script>
<script>
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext('webgl');
  gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

  gl.clearColor(0, 1, 0, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
</script>

Run

Results:

Spec

clearDepth(depth : Number) : undefined

Specifies the value to fill the depth buffer when clear() is called with the DEPTH_BUFFER_BIT. depth is clamped to the range 0 (near) to 1 (far). Defaults to 1 if not specified.

Example:

<canvas id='canvas'></canvas>
<script src='/webgl-debug.js'></script>
<script>
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext('webgl');
  gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

  gl.clearDepth(1);
  gl.clear(gl.COLOR_BUFFER_BIT);
</script>

Run

Results:

Spec

clearStencil(s : Number) : undefined

Specifies the value (integer) to fill the depth buffer when clear() is called with the STENCIL_BUFFER_BIT.

Example:

<canvas id='canvas'></canvas>
<script src='/webgl-debug.js'></script>
<script>
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext('webgl');
  gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

  gl.clearStencil(0);
  gl.clear(gl.STENCIL_BUFFER_BIT);
</script>

Run

Results:

Spec

colorMask(red : Boolean, green : Boolean, blue : Boolean, alpha : Boolean) : undefined

Turns on or off writing to the specified channels of the frame buffer. Defaults to true for all channels. Use getParameter(gl.COLOR_WRITEMASK) to get the current value.

Spec

compileShader(shader : WebGLShader) : undefined

Compiles the specified shader. Must be called after setting the source with shaderSource(). If the shader had errors during compilation, gl.getShaderParameter(shader, gl.COMPILE_STATUS) will return false and you can use getShaderInfoLog() to get details about the error.

Spec

copyTexImage2D(target : Number, level : Number, internalformat : Number, x : Number, y : Number, width : Number, height : Number, border : Number) : undefined

Copies pixels from the framebuffer to the bound texture in the active texture unit (set through activeTexture() and bindTexture()).

target: must be one of TEXTURE_2D, TEXTURE_CUBE_MAP_POSITIVE_X, TEXTURE_CUBE_MAP_NEGATIVE_X, TEXTURE_CUBE_MAP_POSITIVE_Y, TEXTURE_CUBE_MAP_NEGATIVE_Y, TEXTURE_CUBE_MAP_POSITIVE_Z, or TEXTURE_CUBE_MAP_NEGATIVE_Z.
level: specifies the mipmap level to copy into.
internalformat: ALPHA, LUMINANCE, LUMINANCE_ALPHA, RGB, or RGBA.
x, y, width, height: the rectangle in framebuffer to copy.
border: must be 0.

Spec

copyTexSubImage2D(target : Number, level : Number, textureX : Number, textureY : Number, framebufferX : Number, framebufferY : Number, width : Number, height : Number) : undefined

Copies pixels from the framebuffer to a subregion of the bound texture in the active texture unit (set through activeTexture() and bindTexture()).

target: must be one of TEXTURE_2D, TEXTURE_CUBE_MAP_POSITIVE_X, TEXTURE_CUBE_MAP_NEGATIVE_X, TEXTURE_CUBE_MAP_POSITIVE_Y, TEXTURE_CUBE_MAP_NEGATIVE_Y, TEXTURE_CUBE_MAP_POSITIVE_Z, or TEXTURE_CUBE_MAP_NEGATIVE_Z.
level: specifies the mipmap level to copy into.
textureX, textureY: the position in the texture to store the copied pixels.
framebufferX, framebufferY: the position in the framebuffer to read the pixels to copy.
width, height: the size of the region to copy.

Spec

createBuffer() : WebGLBuffer

Creates a buffer. A buffer is memory used to store data passed to the shader program through attributes. See also bindBuffer(), bufferData(), bufferSubData(), deleteBuffer(), isBuffer(), vertexAttribPointer() and enableVertexAttribArray().

Example:

<canvas id='canvas' width='100' height='100'></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec2 vertexPosition;

  void main() {
    gl_Position = vec4(vertexPosition, 0.0, 1.0);
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  void main() {
    gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); // green
  }
</script>
<script src='/webgl-debug.js'></script>
<script>
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext('webgl');
  gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

  // Create Vertex Shader
  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, document.getElementById('vertexShader').textContent);
  gl.compileShader(vertexShader);

  // Create Fragment Shader
  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, document.getElementById('fragmentShader').textContent);
  gl.compileShader(fragmentShader);

  // Create Shader Program
  var program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  gl.useProgram(program);

  // Create a buffer with 3 points to form a triangle
  var triangleBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, triangleBuffer);
  var vertices = [
    -0.5,  -0.5,
     0.5,  -0.5,
     0.0,   0.5];
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

  // Bind the triangles to the vertex shader's 'vertexPosition' attribute and draw it
  var vertexPositionLocation = gl.getAttribLocation(program, 'vertexPosition');
  gl.vertexAttribPointer(vertexPositionLocation, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(vertexPositionLocation);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
</script>

Run

Results:

createFramebuffer() : WebGLFramebuffer

Creates a framebuffer that can be used for offscreen rendering. The actual content of the surface is stored in a either a WebGLRenderbuffer or WebGLTexture. See also bindFramebuffer(), checkFramebufferStatus(), deleteFramebuffer(), framebufferRenderbuffer(), framebufferTexture2D(), getFramebufferAttachmentParameter(), and isFramebuffer().

Example:

<!-- This example draws an image to a framebuffer (backed
     by a texture) as black and white.  Then it draws the 
     framebuffer texture to the canvas. -->
<canvas id='canvas' width='200' height='200'></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec2 vertexPosition;

  varying vec2 textureCoord; 

  void main() {
    gl_Position = vec4(vertexPosition, 0.0, 1.0);

    // gl_Position is [-1,-1] to [1,1], translate to [0,0] to [1,1] for texture
    textureCoord = vec2(vertexPosition.x / 2.0 + 0.5, vertexPosition.y / 2.0 + 0.5);
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  precision mediump float;

  uniform sampler2D sampler;
  uniform bool renderingToFramebuffer;

  varying vec2 textureCoord;
 
  void main() {
    vec4 textureColor = texture2D(sampler, textureCoord);
    if (renderingToFramebuffer) {
      float bw = (textureColor.r + textureColor.g + textureColor.b) / 3.0;
      gl_FragColor = vec4(bw, bw, bw, 1);
    }
    else {
      gl_FragColor = texture2D(sampler, textureCoord);
    }
  }
</script>
<script src='/webgl-debug.js'></script>
<script>
  var img = new Image();
  img.src = 'pic.jpg';
  img.onload = function() {
    var canvas = document.getElementById('canvas');
    var gl = canvas.getContext('webgl');
    gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

    // Create the shader program
    var program = gl.createProgram();
  
    // Create the vertex shader
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, document.getElementById('vertexShader').textContent);
    gl.compileShader(vertexShader);
    gl.attachShader(program, vertexShader);

    // Create fragment shader
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, document.getElementById('fragmentShader').textContent);
    gl.compileShader(fragmentShader);
    gl.attachShader(program, fragmentShader);

    gl.linkProgram(program);
    gl.useProgram(program);

    // Get the attribute and uniform locations from the program
    var vertexPositionLocation = gl.getAttribLocation(program, 'vertexPosition');
    var samplerLocation = gl.getUniformLocation(program, 'sampler');
    var renderingToFramebufferLocation = gl.getUniformLocation(program, 'renderingToFramebuffer');

    // Create a buffer with 4 points to form a square
    var squareBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, squareBuffer);
    var vertices = new Float32Array([
       -1, -1,   // bottom left
        1, -1,   // bottom right
       -1,  1,   // top left
        1,  1]); // top right 
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    // Bind the triangles to the vertex shader's 'vertexPosition' attribute and draw it
    gl.vertexAttribPointer(vertexPositionLocation, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vertexPositionLocation);

    var createAndInitTexture = function(gl, activeTextureUnit) {
      var texture = gl.createTexture();
      gl.activeTexture(activeTextureUnit);
      gl.bindTexture(gl.TEXTURE_2D, texture);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
      return texture;
    };

    // Make a texture to store img and track it in gl's TEXTURE0 unit
    var imgTexture = createAndInitTexture(gl, gl.TEXTURE0);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
    gl.uniform1i(samplerLocation, 0);  // bind fragment shader's 'sampler' to TEXTURE0

    // Make a framebuffer that we will render the image into
    var framebuffer = gl.createFramebuffer();
    var framebufferWidth = 32;
    var framebufferHeight = 32;
    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);

    // Make a texture for the framebuffer and store it in TEXTURE1
    var framebufferTexture = createAndInitTexture(gl, gl.TEXTURE1);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, framebufferWidth, framebufferHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, framebufferTexture, 0);


    // Setup the viewport for the framebuffer
    gl.viewport(0, 0, framebufferWidth, framebufferHeight);

    // Tell the fragment shader we are drawing to the framebuffer
    gl.uniform1i(renderingToFramebufferLocation, true); 

    // Draw img to the framebuffer
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);


    // Turn off drawing to a framebuffer (ie, draw to the canvas)
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);

    // Setup the viewport for the canvas
    gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

    // Change sampler to use TEXTURE1 (the framebuffer)
    gl.uniform1i(samplerLocation, 1);  

    // Tell the fragment shader we are drawing to the canvas
    gl.uniform1i(renderingToFramebufferLocation, false); 

    // Draw the framebuffer to the canvas
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  };
</script>

Run

Results:

createProgram() : WebGLProgram

Creates a shader program. A shader program consists of a vertex shader and fragment shader. Use attachShader() to associate shaders with the program and linkProgram() to finalize the program. After linking, use useProgram() to select the program to use.

Spec

createRenderbuffer() : WebGLRenderbuffer

Creates a renderbuffer. A renderbuffer is an offscreen section of memory used to store the result of rendering, such as the color buffer, depth buffer, or stencil buffer. See also framebufferRenderbuffer(), renderbufferStorage().

Example:

<!-- This example draws an image to a framebuffer backed by a 
     renderbuffer. Then it reads the contents of the renderbuffer
     and copies it to a 2D canvas. -->
<canvas id='output' width='200' height='200'></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec2 vertexPosition;

  varying vec2 textureCoord; 

  void main() {
    gl_Position = vec4(vertexPosition, 0.0, 1.0);

    // gl_Position is [-1,-1] to [1,1], translate to [0,0] to [1,1] for texture
    textureCoord = vec2(vertexPosition.x / 2.0 + 0.5, vertexPosition.y / 2.0 + 0.5);
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  precision mediump float;

  uniform sampler2D sampler;

  varying vec2 textureCoord;
 
  void main() {
    gl_FragColor = texture2D(sampler, textureCoord);
  }
</script>
<script src='/webgl-debug.js'></script>
<script>
  var img = new Image();
  img.src = 'pic.jpg';
  img.onload = function() {
    var output = document.getElementById('output');
    var offscreenCanvas = document.createElement('canvas');
    var gl = offscreenCanvas.getContext('webgl');
    gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

    // Create the shader program
    var program = gl.createProgram();
  
    // Create the vertex shader
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, document.getElementById('vertexShader').textContent);
    gl.compileShader(vertexShader);
    gl.attachShader(program, vertexShader);

    // Create fragment shader
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, document.getElementById('fragmentShader').textContent);
    gl.compileShader(fragmentShader);
    gl.attachShader(program, fragmentShader);

    gl.linkProgram(program);
    gl.useProgram(program);

    // Get the attribute and uniform locations from the program
    var vertexPositionLocation = gl.getAttribLocation(program, 'vertexPosition');
    var samplerLocation = gl.getUniformLocation(program, 'sampler');

    // Create a buffer with 4 points to form a square
    var squareBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, squareBuffer);
    var vertices = new Float32Array([
       -1, -1,   // bottom left
        1, -1,   // bottom right
       -1,  1,   // top left
        1,  1]); // top right 
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    // Bind the triangles to the vertex shader's 'vertexPosition' attribute and draw it
    gl.vertexAttribPointer(vertexPositionLocation, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vertexPositionLocation);

    // Make a texture to store img and track it in gl's TEXTURE0 unit
    var imgTexture = gl.createTexture();
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, imgTexture);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
    gl.uniform1i(samplerLocation, 0);  // bind fragment shader's 'sampler' to TEXTURE0

    // Make a framebuffer that we will render into
    var framebuffer = gl.createFramebuffer();
    var framebufferWidth = output.width;
    var framebufferHeight = output.height;
    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);

    // Create a renderbuffer to store the rendered result
    var renderbuffer = gl.createRenderbuffer();
    gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer);
    gl.renderbufferStorage(gl.RENDERBUFFER, gl.RGBA4, framebufferWidth, framebufferHeight);
    gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, renderbuffer);


    // Setup the viewport for the framebuffer
    gl.viewport(0, 0, framebufferWidth, framebufferHeight);

    // Draw img to the framebuffer
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

    // Read the contents of the render buffer
    var data = new Uint8Array(framebufferWidth * framebufferHeight * 4);
    gl.readPixels(0, 0, framebufferWidth, framebufferHeight, gl.RGBA, gl.UNSIGNED_BYTE, data);

    // Copy the pixels to a 2D canvas
    var context = output.getContext('2d');
    var imageData = context.createImageData(framebufferWidth, framebufferHeight);

    imageData.data.set(data);
    context.putImageData(imageData, 0, 0);
  };
</script>

Run

Results:

createShader(type : Number) : WebGLShader

Creates a vertex or fragment shader. type must be either VERTEX_SHADER or FRAGMENT_SHADER. Shaders must be compiled using compileShader() and then attached to a WebGLProgram using attachShader() before they can be used.

createTexture() : WebGLTexture

Creates a texture. Use activeTexture() to select a texture unit and then bindTexture() to bind a texture to that unit. See also copyTexImage2D(), copyTexSubImage2D(), deleteTexture(), framebufferTexture2D(), getTexParameter(), isTexture(), texImage2D(), texParameterf(), texParameteri(), and texSubImage2D().

Example:

<!-- This example draws an image to the canvas -->
<canvas id='canvas' width='200' height='200'></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec2 vertexPosition;

  varying vec2 textureCoord; 

  void main() {
    gl_Position = vec4(vertexPosition, 0.0, 1.0);

    // gl_Position is [-1,-1] to [1,1], translate to [0,0] to [1,1] for texture
    textureCoord = vec2(vertexPosition.x / 2.0 + 0.5, vertexPosition.y / 2.0 + 0.5);
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  precision mediump float;

  uniform sampler2D sampler;

  varying vec2 textureCoord;
 
  void main() {
    gl_FragColor = texture2D(sampler, textureCoord);
  }
</script>
<script src='/webgl-debug.js'></script>
<script>
  var img = new Image();
  img.src = 'pic.jpg';
  img.onload = function() {
    var canvas = document.getElementById('canvas');
    var gl = canvas.getContext('webgl');
    gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

    // Create the shader program
    var program = gl.createProgram();
  
    // Create the vertex shader
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, document.getElementById('vertexShader').textContent);
    gl.compileShader(vertexShader);
    gl.attachShader(program, vertexShader);

    // Create fragment shader
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, document.getElementById('fragmentShader').textContent);
    gl.compileShader(fragmentShader);
    gl.attachShader(program, fragmentShader);

    gl.linkProgram(program);
    gl.useProgram(program);

    // Get the attribute and uniform locations from the program
    var vertexPositionLocation = gl.getAttribLocation(program, 'vertexPosition');
    var samplerLocation = gl.getUniformLocation(program, 'sampler');

    // Create a buffer with 4 points to form a square
    var squareBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, squareBuffer);
    var vertices = new Float32Array([
       -1, -1,   // bottom left
        1, -1,   // bottom right
       -1,  1,   // top left
        1,  1]); // top right 
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    // Bind the triangles to the vertex shader's 'vertexPosition' attribute and draw it
    gl.vertexAttribPointer(vertexPositionLocation, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vertexPositionLocation);

    // Make a texture to store img and track it in gl's TEXTURE0 unit
    var imgTexture = gl.createTexture();
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, imgTexture);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
    gl.uniform1i(samplerLocation, 0);  // bind fragment shader's 'sampler' to TEXTURE0

    // Draw the img
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  };
</script>

Run

Results:

cullFace(mode : Number) : undefined

Sets which side of the triangle is culled (not drawn). mode must be one of BACK, FRONT, or FRONT_AND_BACK. Defaults to BACK. To turn on culling, you must call enable(CULL_FACE). To select which face is the front or back, use frontFace().

Spec

deleteBuffer(buffer : WebGLBuffer) : undefined

Deletes the specified buffer.

Spec

deleteFramebuffer(framebuffer : WebGLFramebuffer) : undefined

Deletes the specified framebuffer.

Spec

deleteProgram(program : WebGLProgram) : undefined

Deletes the specified program.

Spec

deleteRenderbuffer(renderbuffer : WebGLRenderbuffer) : undefined

Deletes the specified renderprogram.

Spec

deleteShader(shader : WebGLShader) : undefined

Deletes the specified shader.

Spec

deleteTexture(texture : WebGLTexture) : undefined

Deletes the specified texture.

Spec

depthFunc(func : Number) : undefined

Specifies what function used to compare the rendered depth with the existing depth in the framebuffer to determine if the pixel will be written to the framebuffer. func must be one of NEVER, LESS, EQUAL, LEQUAL, GREATER, NOTEQUAL, GEQUAL, or ALWAYS. Defaults to LESS. Depth test will only be used if enabled with enable(DEPTH_TEST).

Spec

depthMask(write : Boolean) : undefined

Turns on or off writing to the depth buffer. Defaults to true. Use getParameter(gl.DEPTH_WRITEMASK) to get the current value. Depth test will only be used if enabled with enable(DEPTH_TEST).

Spec

depthRange(zNear : Number, zFar : Number) : undefined

Sets how z values returned from the vertex shader are mapped to values to store in the depth buffer. This mapping is necessary because the vertex shader output z values will be clipped to the range -1 to 1 but the depth buffer stores depth values in the range 0 to 1.

zNear: specifies what the vertex shader's -1 maps to in the depth buffer.
zFar: specifies what the vertex shader's 1 maps to in the depth buffer.

By default, zNear is 0 and zFar is 1.

Spec

detachShader(program : WebGLProgram, shader : WebGLShader) : undefined

Detaches shader from program. shader must have been attached to program using attachShader().

Spec

disable(capability : Number) : undefined

Turns off a capability. See enable() for a list of capabilities.

Spec

disableVertexAttribArray(index : Number) : undefined

Spec

drawArrays(mode : Number, vertexOffset : Number, vertexCount : Number) : undefined

Draws primitives using the vertex buffer data (stored in the ARRAY_BUFFER buffer).

mode: must be one of POINTS, LINE_STRIP, LINE_LOOP, LINES, TRIANGLE_STRIP, TRIANGLE_FAN, or TRIANGLES.
vertexOffset: specifies the index of the first vertex to draw.
vertexCount: specifies the number of vertices to draw.

You must call enableVertexAttribArray() for each attribute in the vertex shader that uses the vertex data. See also drawElements().

Example:

<canvas id='canvas' width='100' height='100'></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec2 vertexPosition;

  void main() {
    gl_Position = vec4(vertexPosition, 0.0, 1.0);
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  void main() {
    gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); // green
  }
</script>
<script src='/webgl-debug.js'></script>
<script>
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext('webgl');
  gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

  // Create Vertex Shader
  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, document.getElementById('vertexShader').textContent);
  gl.compileShader(vertexShader);

  // Create Fragment Shader
  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, document.getElementById('fragmentShader').textContent);
  gl.compileShader(fragmentShader);

  // Create Shader Program
  var program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  gl.useProgram(program);

  // Create a buffer with 3 points to form a triangle
  var triangleBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, triangleBuffer);
  var vertices = [
    -0.5,  -0.5,
     0.5,  -0.5,
     0.0,   0.5];
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

  // Bind the triangles to the vertex shader's 'vertexPosition' attribute and draw it
  var vertexPositionLocation = gl.getAttribLocation(program, 'vertexPosition');
  gl.vertexAttribPointer(vertexPositionLocation, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(vertexPositionLocation);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
</script>

Run

Results:

Spec

drawElements(mode : Number, indicesCount : Number, indicesNumberType : Number, indicesOffset : Number) : undefined

Draws primitives using the vertex buffer data (stored in the ARRAY_BUFFER buffer) and the index buffer data (stored in the ELEMENT_ARRAY_BUFFER buffer).

mode: must be one of POINTS, LINE_STRIP, LINE_LOOP, LINES, TRIANGLE_STRIP, TRIANGLE_FAN, or TRIANGLES.
indicesCount: specifies the number of number of indices to use.
indicesNumberType: must be one of UNSIGNED_BYTE or UNSIGNED_SHORT.
indicesOffset: specifies the index into the indices array of the first element to draw.

You must call enableVertexAttribArray() for each attribute in the vertex shader that uses the vertex data. See also drawArrays().

Example:

<canvas id='canvas' width='100' height='100'></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec2 vertexPosition;

  void main() {
    gl_Position = vec4(vertexPosition, 0.0, 1.0);
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  void main() {
    gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); // green
  }
</script>
<script src='/webgl-debug.js'></script>
<script>
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext('webgl');
  gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

  // Create Vertex Shader
  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, document.getElementById('vertexShader').textContent);
  gl.compileShader(vertexShader);

  // Create Fragment Shader
  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, document.getElementById('fragmentShader').textContent);
  gl.compileShader(fragmentShader);

  // Create Shader Program
  var program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  gl.useProgram(program);

  // Create a buffer with 4 points to form a square
  var squareBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, squareBuffer);
  var vertices = [
    -0.5,  -0.5,
     0.5,  -0.5,
    -0.5,   0.5, 
     0.5,   0.5];
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

  var indicesBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
  var indices = [
    0, 1, 2,  // Lower left
    2, 1, 3]; // Upper right
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);


  // Bind the triangles to the vertex shader's 'vertexPosition' attribute and draw it
  var vertexPositionLocation = gl.getAttribLocation(program, 'vertexPosition');
  gl.vertexAttribPointer(vertexPositionLocation, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(vertexPositionLocation);
  gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
</script>

Run

Results:

Spec

enable(capability : Number) : undefined

Turns on a capability. capability must be one of the following:

BLEND: if enabled, will combine the color generated by the fragment shader with the existing color in the framebuffer using the method specified by blendFunc(). Most commonly used to enable alpha blending. Defaults to disabled.
CULL_FACE: if enabled, will cull (not draw) triangles based on which face is visible. See cullFace() and frontFace() to configure culling. Defaults to disabled.
DEPTH_TEST: if enabled, fragments will only be written to the framebuffer if they pass the depth function (set with gl.depthFunc()). See also depthMask(), and depthRange(). Most commonly used to draw closer objects on top of further away objects. Defaults to disabled.
DITHER: if enabled, the colors will be dithered when written to the color buffer. Defaults to enabled.
POLYGON_OFFSET_FILL: if enabled, the offset specified by polygonOffset will be added to the depth for the fragment when writing to the depth buffer. Most commonly used to draw decals on top of already drawn surfaces. Defaults to disabled.
SAMPLE_COVERAGE: Defaults to disabled.
SAMPLE_ALPHA_TO_COVERAGE: Defaults to disabled.
SCISSOR_TEST: if enabled, fragments outside the scissor rectangle (set with scissor() will not be drawn. Defaults to disabled.
STENCIL_TEST: if enabled, perform a stencil test on each fragment and update the stencil buffer. See also stencilFunc and stencilOp. Defaults to disabled.

Use disable() to turn off the capability.

Spec

enableVertexAttribArray(attributeLocation : Number) : undefined

Turns on passing data to the vertex shader from the vertex buffer for the specified attribute. Use getAttribLocation() to retrieve the location of an attribute by name.

Spec

finish() : undefined

Spec

flush() : undefined

Spec

framebufferRenderbuffer(target : Number, attachment : Number, renderbuffertarget : Number, renderbuffer : WebGLRenderbuffer) : undefined

Specifies the renderbuffer to use as destination of rendering for the current framebuffer (set with the most recent bindFramebuffer() call).

target: must be FRAMEBUFFER.
attachment: determines what is rendered into renderbuffer. Pass COLOR_ATTACHMENT0 for color data, DEPTH_ATTACHMENT for depth data, or STENCIL_ATTACHMENT for stencil data.
renderbuffertarget: must be RENDERBUFFER.
renderbuffer: the buffer to store the rendered output.

Example:

<!-- This example draws an image to a framebuffer backed by a 
     renderbuffer. Then it reads the contents of the renderbuffer
     and copies it to a 2D canvas. -->
<canvas id='output' width='200' height='200'></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec2 vertexPosition;

  varying vec2 textureCoord; 

  void main() {
    gl_Position = vec4(vertexPosition, 0.0, 1.0);

    // gl_Position is [-1,-1] to [1,1], translate to [0,0] to [1,1] for texture
    textureCoord = vec2(vertexPosition.x / 2.0 + 0.5, vertexPosition.y / 2.0 + 0.5);
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  precision mediump float;

  uniform sampler2D sampler;

  varying vec2 textureCoord;
 
  void main() {
    gl_FragColor = texture2D(sampler, textureCoord);
  }
</script>
<script src='/webgl-debug.js'></script>
<script>
  var img = new Image();
  img.src = 'pic.jpg';
  img.onload = function() {
    var output = document.getElementById('output');
    var offscreenCanvas = document.createElement('canvas');
    var gl = offscreenCanvas.getContext('webgl');
    gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

    // Create the shader program
    var program = gl.createProgram();
  
    // Create the vertex shader
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, document.getElementById('vertexShader').textContent);
    gl.compileShader(vertexShader);
    gl.attachShader(program, vertexShader);

    // Create fragment shader
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, document.getElementById('fragmentShader').textContent);
    gl.compileShader(fragmentShader);
    gl.attachShader(program, fragmentShader);

    gl.linkProgram(program);
    gl.useProgram(program);

    // Get the attribute and uniform locations from the program
    var vertexPositionLocation = gl.getAttribLocation(program, 'vertexPosition');
    var samplerLocation = gl.getUniformLocation(program, 'sampler');

    // Create a buffer with 4 points to form a square
    var squareBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, squareBuffer);
    var vertices = new Float32Array([
       -1, -1,   // bottom left
        1, -1,   // bottom right
       -1,  1,   // top left
        1,  1]); // top right 
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    // Bind the triangles to the vertex shader's 'vertexPosition' attribute and draw it
    gl.vertexAttribPointer(vertexPositionLocation, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vertexPositionLocation);

    // Make a texture to store img and track it in gl's TEXTURE0 unit
    var imgTexture = gl.createTexture();
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, imgTexture);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
    gl.uniform1i(samplerLocation, 0);  // bind fragment shader's 'sampler' to TEXTURE0

    // Make a framebuffer that we will render into
    var framebuffer = gl.createFramebuffer();
    var framebufferWidth = output.width;
    var framebufferHeight = output.height;
    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);

    // Create a renderbuffer to store the rendered result
    var renderbuffer = gl.createRenderbuffer();
    gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer);
    gl.renderbufferStorage(gl.RENDERBUFFER, gl.RGBA4, framebufferWidth, framebufferHeight);
    gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, renderbuffer);


    // Setup the viewport for the framebuffer
    gl.viewport(0, 0, framebufferWidth, framebufferHeight);

    // Draw img to the framebuffer
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

    // Read the contents of the render buffer
    var data = new Uint8Array(framebufferWidth * framebufferHeight * 4);
    gl.readPixels(0, 0, framebufferWidth, framebufferHeight, gl.RGBA, gl.UNSIGNED_BYTE, data);

    // Copy the pixels to a 2D canvas
    var context = output.getContext('2d');
    var imageData = context.createImageData(framebufferWidth, framebufferHeight);

    imageData.data.set(data);
    context.putImageData(imageData, 0, 0);
  };
</script>

Run

Results:

Spec

framebufferTexture2D(target : Number, attachment : Number, textarget : Number, texture : WebGLTexture, level : Number) : undefined

Specifies the texture to use as destination of rendering for the current framebuffer (set with the most recent bindFramebuffer() call).

target: must be FRAMEBUFFER.
attachment: determines what is rendered into renderbuffer. Pass COLOR_ATTACHMENT0 for color data, DEPTH_ATTACHMENT for depth data, or STENCIL_ATTACHMENT for stencil data.
target: must be one of TEXTURE_2D, TEXTURE_CUBE_MAP_POSITIVE_X, TEXTURE_CUBE_MAP_NEGATIVE_X, TEXTURE_CUBE_MAP_POSITIVE_Y, TEXTURE_CUBE_MAP_NEGATIVE_Y, TEXTURE_CUBE_MAP_POSITIVE_Z, or TEXTURE_CUBE_MAP_NEGATIVE_Z.
texture: the texture to store the rendered output.
level: must be 0.

Spec

frontFace(mode : Number) : undefined

Determines which side of triangles is the front face. mode must be one of CW or CCW. To turn on culling, you must call enable(CULL_FACE). To select which face is culled, use cullFace().

Spec

generateMipmap(target : Number) : undefined

Generate the mipmap for the bound texture in the active texture unit (set through activeTexture() and bindTexture()). A mipmap is a set of textures that are 1/2, 1/4, 1/8, etc of the original image. The mipmap allows higher quality rendering when drawing the texture at smaller sizes. target must be one of TEXTURE_2D or TEXTURE_CUBE_MAP. Note, you can only generate mipmaps for textures where the width and height are both powers of 2 (such as 128, 256, 512, etc).

Spec

getActiveAttrib(program : WebGLProgram, index : Number) : WebGLActiveInfo

Returns information about an attribute in program. program must be linked before calling getActiveAttrib(). index must be between 0 and gl.getProgramParameter(program, ACTIVE_ATTRIBUTES) - 1.

Example:

<canvas id='canvas' width='200' height='200'></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec2 vertexPosition;

  varying vec2 textureCoord; 

  void main() {
    gl_Position = vec4(vertexPosition, 0.0, 1.0);

    // gl_Position is [-1,-1] to [1,1], translate to [0,0] to [1,1] for texture
    textureCoord = vec2(vertexPosition.x / 2.0 + 0.5, vertexPosition.y / 2.0 + 0.5);
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  precision mediump float;

  uniform sampler2D sampler;
  uniform bool renderingToFramebuffer;

  varying vec2 textureCoord;
 
  void main() {
    vec4 textureColor = texture2D(sampler, textureCoord);
    if (renderingToFramebuffer) {
      float bw = (textureColor.r + textureColor.g + textureColor.b) / 3.0;
      gl_FragColor = vec4(bw, bw, bw, 1);
    }
    else {
      gl_FragColor = texture2D(sampler, textureCoord);
    }
  }
</script>
<script src='/webgl-debug.js'></script>
<script>
  var img = new Image();
  img.src = 'pic.jpg';
  img.onload = function() {
    var canvas = document.getElementById('canvas');
    var gl = canvas.getContext('webgl');
    gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

    // Create the shader program
    var program = gl.createProgram();
  
    // Create the vertex shader
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, document.getElementById('vertexShader').textContent);
    gl.compileShader(vertexShader);
    gl.attachShader(program, vertexShader);

    // Create fragment shader
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, document.getElementById('fragmentShader').textContent);
    gl.compileShader(fragmentShader);
    gl.attachShader(program, fragmentShader);

    gl.linkProgram(program);
    gl.useProgram(program);

    var attributesCount = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);

    console.log('Attributes: ' + attributesCount);
    for (var i = 0; i < attributesCount; i++) {

      var attributeInfo = gl.getActiveAttrib(program, i);
      console.dir(attributeInfo);
    }

    var uniformsCount = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);

    console.log('Uniforms: ' + uniformsCount);
    for (var i = 0; i < uniformsCount; i++) {

      var uniformInfo = gl.getActiveUniform(program, i);
      console.dir(uniformInfo);
    }
  };
</script>

Run

Results:

Spec

getActiveUniform(program : WebGLProgram, index : Number) : WebGLActiveInfo

Returns information about a uniform in program. program must be linked before calling getActiveUniform(). index must be between 0 and gl.getProgramParameter(program, ACTIVE_UNIFORMS) - 1.

Example:

<canvas id='canvas' width='200' height='200'></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec2 vertexPosition;

  varying vec2 textureCoord; 

  void main() {
    gl_Position = vec4(vertexPosition, 0.0, 1.0);

    // gl_Position is [-1,-1] to [1,1], translate to [0,0] to [1,1] for texture
    textureCoord = vec2(vertexPosition.x / 2.0 + 0.5, vertexPosition.y / 2.0 + 0.5);
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  precision mediump float;

  uniform sampler2D sampler;
  uniform bool renderingToFramebuffer;

  varying vec2 textureCoord;
 
  void main() {
    vec4 textureColor = texture2D(sampler, textureCoord);
    if (renderingToFramebuffer) {
      float bw = (textureColor.r + textureColor.g + textureColor.b) / 3.0;
      gl_FragColor = vec4(bw, bw, bw, 1);
    }
    else {
      gl_FragColor = texture2D(sampler, textureCoord);
    }
  }
</script>
<script src='/webgl-debug.js'></script>
<script>
  var img = new Image();
  img.src = 'pic.jpg';
  img.onload = function() {
    var canvas = document.getElementById('canvas');
    var gl = canvas.getContext('webgl');
    gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

    // Create the shader program
    var program = gl.createProgram();
  
    // Create the vertex shader
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, document.getElementById('vertexShader').textContent);
    gl.compileShader(vertexShader);
    gl.attachShader(program, vertexShader);

    // Create fragment shader
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, document.getElementById('fragmentShader').textContent);
    gl.compileShader(fragmentShader);
    gl.attachShader(program, fragmentShader);

    gl.linkProgram(program);
    gl.useProgram(program);

    var attributesCount = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);

    console.log('Attributes: ' + attributesCount);
    for (var i = 0; i < attributesCount; i++) {

      var attributeInfo = gl.getActiveAttrib(program, i);
      console.dir(attributeInfo);
    }

    var uniformsCount = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);

    console.log('Uniforms: ' + uniformsCount);
    for (var i = 0; i < uniformsCount; i++) {

      var uniformInfo = gl.getActiveUniform(program, i);
      console.dir(uniformInfo);
    }
  };
</script>

Run

Results:

Spec

getAttachedShaders(program : WebGLProgram) : Array<WebGLShader>

Spec

getAttribLocation(program : WebGLProgram, name : String) : Number

Spec

getBufferParameter(target : Number, parameter : Number) : Object

target: must be one of ARRAY_BUFFER or ELEMENT_ARRAY_BUFFER.
parameter: must be one of BUFFER_SIZE or BUFFER_USAGE.

Spec

getContextAttributes() : WebGLContextAttributes

Returns the attributes used to construct this context. To modify these attributes, pass in the desired attributes to the first call to HTMLCanvasElement.getContext('webgl', attributes).

Example:

<canvas id='canvas'></canvas>
<script src='/webgl-debug.js'></script>
<script>
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext('webgl');
  gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

  var attr = gl.getContextAttributes();
 
  for (var p in attr) {
    console.log(p + ': ' + attr[p]);
  }
</script>

Run

Results:

getError() : Number

Returns the first error hit since the last time getError() was called. The returned value will be one of NO_ERROR, INVALID_ENUM, INVALID_VALUE, INVALID_OPERATION, INVALID_FRAMEBUFFER_OPERATION, or OUT_OF_MEMORY.

Spec

getExtension(name : String) : Object

Enables the specified extension and returns an object that contains any constants or functions provided by the extension. Call getSupportedExtensions() to get an array of valid extension names. If name is not in the Array returned by getSupportedExtensions(), getExtension() will return null.

Example:

<canvas id='canvas'></canvas>
<script src='/webgl-debug.js'></script>
<script>
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext('webgl');
  gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

  gl.getSupportedExtensions().forEach(function(extName) {
    console.log(extName);
    var ext = gl.getExtension(extName);
    for (var n in ext) {
      console.log('  ' + n + ' = ' + ext[n]);
    }
  });
</script>

Run

Results:

getFramebufferAttachmentParameter(target : Number, attachment : Number, parameter : Number) : Object

target: must be FRAMEBUFFER.
attachment: the render target to query. Must be one of COLOR_ATTACHMENT0 for color data, DEPTH_ATTACHMENT for depth data, or STENCIL_ATTACHMENT for stencil data.
parameter: the parameter to query. Must be one of FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE, FRAMEBUFFER_ATTACHMENT_OBJECT_NAME, FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL, or FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE.

Spec

getParameter(parameter : Number) : Object

parameter must be one of ACTIVE_TEXTURE, ALIASED_LINE_WIDTH_RANGE, ALIASED_POINT_SIZE_RANGE, ALPHA_BITS, ARRAY_BUFFER_BINDING, BLEND, BLEND_DST_ALPHA, BLEND_DST_RGB, BLEND_EQUATION_ALPHA, BLEND_EQUATION_RGB, BLEND_SRC_ALPHA, BLEND_SRC_RGB, BLUE_BITS, COLOR_CLEAR_VALUE, COLOR_WRITEMASK, COMPRESSED_TEXTURE_FORMATS, CULL_FACE, CULL_FACE_MODE, CURRENT_PROGRAM, DEPTH_BITS, DEPTH_CLEAR_VALUE, DEPTH_FUNC, DEPTH_RANGE, DEPTH_TEST, DEPTH_WRITEMASK, DITHER, ELEMENT_ARRAY_BUFFER_BINDING, FRAMEBUFFER_BINDING, FRONT_FACE, GENERATE_MIPMAP_HINT, GREEN_BITS, LINE_WIDTH, MAX_COMBINED_TEXTURE_IMAGE_UNITS, MAX_CUBE_MAP_TEXTURE_SIZE, MAX_FRAGMENT_UNIFORM_VECTORS, MAX_RENDERBUFFER_SIZE, MAX_TEXTURE_IMAGE_UNITS, MAX_TEXTURE_SIZE, MAX_VARYING_VECTORS, MAX_VERTEX_ATTRIBS, MAX_VERTEX_TEXTURE_IMAGE_UNITS, MAX_VERTEX_UNIFORM_VECTORS, MAX_VIEWPORT_DIMS, NUM_COMPRESSED_TEXTURE_FORMATS, PACK_ALIGNMENT, POLYGON_OFFSET_FACTOR, POLYGON_OFFSET_FILL, POLYGON_OFFSET_UNITS, RED_BITS, RENDERBUFFER_BINDING, RENDERER, SAMPLE_ALPHA_TO_COVERAGE, SAMPLE_BUFFERS, SAMPLE_COVERAGE, SAMPLE_COVERAGE_INVERT, SAMPLE_COVERAGE_VALUE, SAMPLES, SCISSOR_BOX, SCISSOR_TEST, SHADING_LANGUAGE_VERSION, STENCIL_BACK_FAIL, STENCIL_BACK_FUNC, STENCIL_BACK_PASS_DEPTH_FAIL, STENCIL_BACK_PASS_DEPTH_PASS, STENCIL_BACK_REF, STENCIL_BACK_VALUE_MASK, STENCIL_BACK_WRITEMASK, STENCIL_BITS, STENCIL_CLEAR_VALUE, STENCIL_FAIL, STENCIL_FUNC, STENCIL_PASS_DEPTH_FAIL, STENCIL_PASS_DEPTH_PASS, STENCIL_REF, STENCIL_TEST, STENCIL_VALUE_MASK, STENCIL_WRITEMASK, SUBPIXEL_BITS, TEXTURE_BINDING_2D, TEXTURE_BINDING_CUBE_MAP, UNPACK_ALIGNMENT, VIEWPORT, VENDOR, or VERSION.

Example:

<canvas id='canvas'></canvas>
<script src='/webgl-debug.js'></script>
<script>
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext('webgl');
  gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

  var names = {};
  Object.keys(gl).forEach(function(key) {
    names[gl[key]] = key;
  });

  console.log(names[gl.getParameter(gl.BLEND_EQUATION_RGB)]);
</script>

Run

Results:

Spec

getProgramInfoLog(program : WebGLProgram) : String

Spec

getProgramParameter(program : WebGLProgram, parameter : Number) : Object

parameter must be one of DELETE_STATUS, LINK_STATUS, VALIDATE_STATUS, ATTACHED_SHADERS, ACTIVE_ATTRIBUTES, or ACTIVE_UNIFORMS.

Spec

getRenderbufferParameter(target : Number, parameter : Number) : Object

target: must be RENDERBUFFER.
parameter: must be one of RENDERBUFFER_WIDTH, RENDERBUFFER_HEIGHT, RENDERBUFFER_INTERNAL, RENDERBUFFER_RED_SIZE, RENDERBUFFER_GREEN_SIZE, RENDERBUFFER_BLUE_SIZE, RENDERBUFFER_ALPHA_SIZE, RENDERBUFFER_DEPTH_SIZE, or RENDERBUFFER_STENCIL_SIZE.

Spec

getShaderInfoLog(shader : WebGLShader) : String

Spec

getShaderParameter(shader : WebGLShader, parameter : Number) : Object

parameter must be one of SHADER_TYPE, DELETE_STATUS, or COMPILE_STATUS.

Spec

getShaderPrecisionFormat(shadertype : Number, precisiontype : Number) : WebGLShaderPrecisionFormat

Returns information about the numerical precision limits of shader data types. target must be one of FRAGMENT_SHADER or VERTEX_SHADER. precisiontype must be one of LOW_FLOAT, MEDIUM_FLOAT, HIGH_FLOAT, LOW_INT, MEDIUM_INT, or HIGH_INT.

Example:

<canvas id='canvas'></canvas>
<script src='/webgl-debug.js'></script>
<script>
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext('webgl');
  gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

  var precisionTypes = ['LOW_FLOAT', 'MEDIUM_FLOAT', 'HIGH_FLOAT',
                        'LOW_INT',   'MEDIUM_INT',   'HIGH_INT'];
  var targetTypes = ['FRAGMENT_SHADER', 'VERTEX_SHADER'];

  precisionTypes.forEach(function(precisionType) {
    targetTypes.forEach(function(targetType) {
      var format = gl.getShaderPrecisionFormat(gl[targetType], gl[precisionType]);
      console.log(targetType + ', ' + precisionType);
      console.log('    precision: ' + format.precision +
                  ', rangeMin: ' + format.rangeMin +
                  ', rangeMax: ' + format.rangeMax);
    });
  });
</script>

Run

Results:

Spec

getShaderSource(shader : WebGLShader) : String

Spec

getSupportedExtensions() : Array<String>

Returns an Array of Strings that indicate which extensions this canvas supports. See getExtension().

Example:

<canvas id='canvas'></canvas>
<script src='/webgl-debug.js'></script>
<script>
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext('webgl');
  gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

  gl.getSupportedExtensions().forEach(function(ext) {
    console.log(ext);
  });
</script>

Run

Results:

getTexParameter(target : Number, parameter : Number) : Object

Returns the value of the specified parameter for the the bound texture in the active texture unit (set through activeTexture() and bindTexture()). Use texParameterf() and texParameteri() to set texture parameters.

must be one of TEXTURE_2D or TEXTURE_CUBE_MAP.
parameter: must be one of TEXTURE_MAG_FILTER, TEXTURE_MIN_FILTER, TEXTURE_WRAP_S, or TEXTURE_WRAP_T.

Spec

getUniform(program : WebGLProgram, location : WebGLUniformLocation) : Object

Retrieves the value stored in location by a uniform*() call.

Example:

<!-- This example draws an image to the canvas -->
<canvas id='canvas' width='200' height='200'></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec2 vertexPosition;

  varying vec2 textureCoord; 

  void main() {
    gl_Position = vec4(vertexPosition, 0.0, 1.0);

    // gl_Position is [-1,-1] to [1,1], translate to [0,0] to [1,1] for texture
    textureCoord = vec2(vertexPosition.x / 2.0 + 0.5, vertexPosition.y / 2.0 + 0.5);
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  precision mediump float;

  uniform sampler2D sampler;

  varying vec2 textureCoord;
 
  void main() {
    gl_FragColor = texture2D(sampler, textureCoord);
  }
</script>
<script src='/webgl-debug.js'></script>
<script>
  var img = new Image();
  img.src = 'pic.jpg';
  img.onload = function() {
    var canvas = document.getElementById('canvas');
    var gl = canvas.getContext('webgl');
    gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

    // Create the shader program
    var program = gl.createProgram();
  
    // Create the vertex shader
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, document.getElementById('vertexShader').textContent);
    gl.compileShader(vertexShader);
    gl.attachShader(program, vertexShader);

    // Create fragment shader
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, document.getElementById('fragmentShader').textContent);
    gl.compileShader(fragmentShader);
    gl.attachShader(program, fragmentShader);

    gl.linkProgram(program);
    gl.useProgram(program);

    // Get the attribute and uniform locations from the program
    var vertexPositionLocation = gl.getAttribLocation(program, 'vertexPosition');
    var samplerLocation = gl.getUniformLocation(program, 'sampler');

    // Create a buffer with 4 points to form a square
    var squareBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, squareBuffer);
    var vertices = new Float32Array([
       -1, -1,   // bottom left
        1, -1,   // bottom right
       -1,  1,   // top left
        1,  1]); // top right 
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    // Bind the triangles to the vertex shader's 'vertexPosition' attribute and draw it
    gl.vertexAttribPointer(vertexPositionLocation, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vertexPositionLocation);

    // Make a texture to store img and track it in gl's TEXTURE0 unit
    var imgTexture = gl.createTexture();
    gl.activeTexture(gl.TEXTURE6);
    gl.bindTexture(gl.TEXTURE_2D, imgTexture);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
    gl.uniform1i(samplerLocation, 6);  // bind fragment shader's 'sampler' to TEXTURE6

    console.log('sampler: ' + gl.getUniform(program, samplerLocation));

    // Draw the img
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  };
</script>

Run

Results:

Spec

getUniformLocation(program : WebGLProgram, name : String) : WebGLUniformLocation

Spec

getVertexAttrib(index : Number, parameter : Number) : Object

parameter must be one of VERTEX_ATTRIB_ARRAY_BUFFER_BINDING, VERTEX_ATTRIB_ARRAY_ENABLED, VERTEX_ATTRIB_ARRAY_SIZE, VERTEX_ATTRIB_ARRAY_STRIDE, VERTEX_ATTRIB_ARRAY_TYPE , VERTEX_ATTRIB_ARRAY_NORMALIZED, or CURRENT_VERTEX_ATTRIB.

Spec

getVertexAttribOffset(index : Number, parameter : Number) : Number

parameter must be VERTEX_ATTRIB_ARRAY_POINTER.

Spec

hint(target : Number, mode : Number) : undefined

target: must be GENERATE_MIPMAP_HINT.
mode: must be one of FASTEST, NICEST, or DONT_CARE.

Spec

isBuffer(buffer : WebGLBuffer) : Boolean

Returns true if buffer is a valid, bound buffer.

Example:

<canvas id='canvas'></canvas>
<script src='/webgl-debug.js'></script>
<script>
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext('webgl');
  gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

  var buffer = gl.createBuffer();
  console.log(gl.isBuffer(buffer));

  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  console.log(gl.isBuffer(buffer));

  gl.deleteBuffer(buffer);
  console.log(gl.isBuffer(buffer));
</script>

Run

Results:

Spec

isContextLost() : Boolean

isEnabled(capability : Number) : Boolean

Returns true if specified capability is enabled. See enable() for a list of capabilities.

Spec

isFramebuffer(framebuffer : WebGLFramebuffer) : Boolean

Returns true if framebuffer is a valid, bound framebuffer.

Example:

<canvas id='canvas'></canvas>
<script src='/webgl-debug.js'></script>
<script>
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext('webgl');
  gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

  var framebuffer = gl.createFramebuffer();
  console.log(gl.isFramebuffer(framebuffer));

  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  console.log(gl.isFramebuffer(framebuffer));

  gl.deleteFramebuffer(framebuffer);
  console.log(gl.isFramebuffer(framebuffer));
</script>

Run

Results:

Spec

isProgram(program : WebGLProgram) : Boolean

Returns true if program is a valid program.

Example:

<canvas id='canvas'></canvas>
<script src='/webgl-debug.js'></script>
<script>
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext('webgl');
  gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

  var program = gl.createProgram();
  console.log(gl.isProgram(program));

  gl.deleteProgram(program);
  console.log(gl.isProgram(program));
</script>

Run

Results:

Spec

isRenderbuffer(renderbuffer : WebGLRenderbuffer) : Boolean

Returns true if renderbuffer is a valid, bound renderbuffer.

Example:

<canvas id='canvas'></canvas>
<script src='/webgl-debug.js'></script>
<script>
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext('webgl');
  gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

  var renderbuffer = gl.createRenderbuffer();
  console.log(gl.isRenderbuffer(renderbuffer));

  gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer);
  console.log(gl.isRenderbuffer(renderbuffer));

  gl.deleteRenderbuffer(renderbuffer);
  console.log(gl.isRenderbuffer(renderbuffer));
</script>

Run

Results:

Spec

isShader(shader : WebGLShader) : Boolean

Returns true if shader is a valid shader.

Example:

<canvas id='canvas'></canvas>
<script src='/webgl-debug.js'></script>
<script>
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext('webgl');
  gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

  var shader = gl.createShader(gl.VERTEX_SHADER);
  console.log(gl.isShader(shader));

  gl.deleteShader(shader);
  console.log(gl.isShader(shader));
</script>

Run

Results:

Spec

isTexture(texture : WebGLTexture) : Boolean

Returns true if texture is a valid, bound texture.

Example:

<canvas id='canvas'></canvas>
<script src='/webgl-debug.js'></script>
<script>
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext('webgl');
  gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

  var texture = gl.createTexture();
  console.log(gl.isTexture(texture));

  gl.bindTexture(gl.TEXTURE_2D, texture);
  console.log(gl.isTexture(texture));

  gl.deleteTexture(texture);
  console.log(gl.isTexture(texture));
</script>

Run

Results:

Spec

lineWidth(width : Number) : undefined

Spec

linkProgram(program : WebGLProgram) : undefined

Spec

makeXRCompatible() : Promise<undefined>

parameter	Valid Values	Initial Value
`PACK_ALIGNMENT`	`1`, `2`, `4`, or `8`	`4`
`UNPACK_ALIGNMENT`	`1`, `2`, `4`, or `8`	`4`
`UNPACK_FLIP_Y_WEBGL`	`true` or `false`	`false`
`UNPACK_PREMULTIPLY_ALPHA_WEBGL`	`true` or `false`	`false`
`UNPACK_COLORSPACE_CONVERSION_WEBGL`	`BROWSER_DEFAULT_WEBGL` or `NONE`	`BROWSER_DEFAULT_WEBGL`

Example:

<!-- This example creates a texture from circle drawn to a 2d canvas -->
<canvas id='canvas' width='200' height='200'></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec2 vertexPosition;

  varying vec2 textureCoord; 

  void main() {
    gl_Position = vec4(vertexPosition, 0.0, 1.0);

    // gl_Position is [-1,-1] to [1,1], translate to [0,0] to [1,1] for texture
    textureCoord = vec2(vertexPosition.x / 2.0 + 0.5, vertexPosition.y / 2.0 + 0.5);
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  precision mediump float;

  uniform sampler2D sampler;

  varying vec2 textureCoord;
 
  void main() {
    gl_FragColor = texture2D(sampler, textureCoord);
  }
</script>
<script src='/webgl-debug.js'></script>
<script>
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext('webgl');
  gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

  // Create the shader program
  var program = gl.createProgram();

  // Create the vertex shader
  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, document.getElementById('vertexShader').textContent);
  gl.compileShader(vertexShader);
  gl.attachShader(program, vertexShader);

  // Create fragment shader
  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, document.getElementById('fragmentShader').textContent);
  gl.compileShader(fragmentShader);
  gl.attachShader(program, fragmentShader);

  gl.linkProgram(program);
  gl.useProgram(program);

  // Get the attribute and uniform locations from the program
  var vertexPositionLocation = gl.getAttribLocation(program, 'vertexPosition');
  var samplerLocation = gl.getUniformLocation(program, 'sampler');

  // Create a buffer with 4 points to form a square
  var squareBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, squareBuffer);
  var vertices = new Float32Array([
     -1, -1,   // bottom left
      1, -1,   // bottom right
     -1,  1,   // top left
      1,  1]); // top right 
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

  // Bind the triangles to the vertex shader's 'vertexPosition' attribute and draw it
  gl.vertexAttribPointer(vertexPositionLocation, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(vertexPositionLocation);

  // Make a texture to store the random data
  var texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

  // Render a circle in a 2D canvas
  var canvas2D = document.createElement('canvas');
  var context2D = canvas2D.getContext('2d');

  context2D.beginPath();
  context2D.arc(50, 50, 30, Math.PI, 0); // Top half
  context2D.arc(50, 50, 30, 0, Math.PI); // Bottom half
  context2D.stroke();

  var data = context2D.getImageData(0, 0, 200, 200);

  // Load the data into the texture
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, data);

  gl.uniform1i(samplerLocation, 0);  // bind fragment shader's 'sampler' to TEXTURE0

  // Draw the texture
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
</script>

Run

Results:

Spec

texImage2D(target : Number, level : Number, internalformat : Number, format : Number, type : Number, image : HTMLImageElement) : undefined

Example:

<!-- This example draws an image to the canvas -->
<canvas id='canvas' width='200' height='200'></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec2 vertexPosition;

  varying vec2 textureCoord; 

  void main() {
    gl_Position = vec4(vertexPosition, 0.0, 0.0);

    // gl_Position is [-1,-1] to [1,1], translate to [0,0] to [1,1] for texture
    textureCoord = vec2(vertexPosition.x / 2.0 + 0.5, vertexPosition.y / 2.0 + 0.5);
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  precision mediump float;

  uniform sampler2D sampler;

  varying vec2 textureCoord;
 
  void main() {
    gl_FragColor = texture2D(sampler, textureCoord);
  }
</script>
<script src='/webgl-debug.js'></script>
<script>
  var img = new Image();
  img.src = 'pic.jpg';
  img.onload = function() {
    var canvas = document.getElementById('canvas');
    var gl = canvas.getContext('webgl');
    gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

    // Create the shader program
    var program = gl.createProgram();
  
    // Create the vertex shader
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, document.getElementById('vertexShader').textContent);
    gl.compileShader(vertexShader);
    gl.attachShader(program, vertexShader);

    // Create fragment shader
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, document.getElementById('fragmentShader').textContent);
    gl.compileShader(fragmentShader);
    gl.attachShader(program, fragmentShader);

    gl.linkProgram(program);
    gl.useProgram(program);

    // Get the attribute and uniform locations from the program
    var vertexPositionLocation = gl.getAttribLocation(program, 'vertexPosition');
    var samplerLocation = gl.getUniformLocation(program, 'sampler');

    // Create a buffer with 4 points to form a square
    var squareBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, squareBuffer);
    var vertices = new Float32Array([
       -1, -1,   // bottom left
        1, -1,   // bottom right
       -1,  1,   // top left
        1,  1]); // top right 
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    // Bind the triangles to the vertex shader's 'vertexPosition' attribute and draw it
    gl.vertexAttribPointer(vertexPositionLocation, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vertexPositionLocation);

    // Make a texture to store img and track it in gl's TEXTURE0 unit
    var imgTexture = gl.createTexture();
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, imgTexture);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
    gl.uniform1i(samplerLocation, 0);  // bind fragment shader's 'sampler' to TEXTURE0

    // Draw the img
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  };
</script>

Run

Results:

Spec

texImage2D(target : Number, level : Number, internalformat : Number, format : Number, type : Number, video : HTMLVideoElement) : undefined

Spec

texImage2D(target : Number, level : Number, internalformat : Number, width : Number, height : Number, border : Number, format : Number, type : Number, data : ArrayBufferView) : undefined

Specifies the size and data of the bound texture in the active texture unit (set through activeTexture() and bindTexture()).

target: must be one of TEXTURE_2D, TEXTURE_CUBE_MAP_POSITIVE_X, TEXTURE_CUBE_MAP_NEGATIVE_X, TEXTURE_CUBE_MAP_POSITIVE_Y, TEXTURE_CUBE_MAP_NEGATIVE_Y, TEXTURE_CUBE_MAP_POSITIVE_Z, or TEXTURE_CUBE_MAP_NEGATIVE_Z.
level: is the mipmap level (0 is base level).
internalformat: must be one of ALPHA, LUMINANCE, LUMINANCE_ALPHA, RGB, or RGBA.
width and height: are the size of the texture.
border: must be 0.
format: must match internalformat.
type: must be one of UNSIGNED_BYTE, UNSIGNED_SHORT_5_6_5, UNSIGNED_SHORT_4_4_4_4, or UNSIGNED_5_5_5_1;
data: is the data to load into the texture. May be null to allocate the texture without data.

The loaded data is affected by the pixelStorei() options. You can also use copyTexSubImage2D or texSubImage2D to initialize the texture.

Example:

<!-- This example creates a texture from randomly generated 
     RGBA data stored in a typed array (Uint8Array) -->
<canvas id='canvas' width='200' height='200'></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec2 vertexPosition;

  varying vec2 textureCoord; 

  void main() {
    gl_Position = vec4(vertexPosition, 0.0, 1.0);

    // gl_Position is [-1,-1] to [1,1], translate to [0,0] to [1,1] for texture
    textureCoord = vec2(vertexPosition.x / 2.0 + 0.5, vertexPosition.y / 2.0 + 0.5);
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  precision mediump float;

  uniform sampler2D sampler;

  varying vec2 textureCoord;
 
  void main() {
    gl_FragColor = texture2D(sampler, textureCoord);
  }
</script>
<script src='/webgl-debug.js'></script>
<script>
    var canvas = document.getElementById('canvas');
    var gl = canvas.getContext('webgl');
    gl = WebGLDebugUtils.makeDebugContext(gl); // Remove this in production code

    // Create the shader program
    var program = gl.createProgram();
  
    // Create the vertex shader
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, document.getElementById('vertexShader').textContent);
    gl.compileShader(vertexShader);
    gl.attachShader(program, vertexShader);

    // Create fragment shader
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, document.getElementById('fragmentShader').textContent);
    gl.compileShader(fragmentShader);
    gl.attachShader(program, fragmentShader);

    gl.linkProgram(program);
    gl.useProgram(program);

    // Get the attribute and uniform locations from the program
    var vertexPositionLocation = gl.getAttribLocation(program, 'vertexPosition');
    var samplerLocation = gl.getUniformLocation(program, 'sampler');

    // Create a buffer with 4 points to form a square
    var squareBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, squareBuffer);
    var vertices = new Float32Array([
       -1, -1,   // bottom left
        1, -1,   // bottom right
       -1,  1,   // top left
        1,  1]); // top right 
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    // Bind the triangles to the vertex shader's 'vertexPosition' attribute and draw it
    gl.vertexAttribPointer(vertexPositionLocation, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vertexPositionLocation);

    // Make a texture to store the random data
    var texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

    var textureWidth = 128;
    var textureHeight = 128;

    var data = new Uint8Array(4 * textureWidth * textureHeight);
    for (var i = 0; i < data.length; i++) {
      data[i] = Math.random() * 256;
    }
    // Load the data into the texture
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, textureWidth, textureHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);

    gl.uniform1i(samplerLocation, 0);  // bind fragment shader's 'sampler' to TEXTURE0

    // Draw the texture
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
</script>

Run

Results:

Spec

texParameterf(target : Number, parameter : Number, value : Number) : undefined

Same as texParameteri().

Spec

texParameteri(target : Number, parameter : Number, value : Number) : undefined

Sets the value of the specified parameter for the bound texture in the active texture unit (set through activeTexture() and bindTexture()). Use getTexParameter() to get texture parameters.

parameter	Valid Values	Initial Value
`TEXTURE_MIN_FILTER`	`NEAREST`, `LINEAR`, `NEAREST_MIPMAP_NEAREST`, `LINEAR_MIPMAP_NEAREST`, `NEAREST_MIPMAP_LINEAR`, or `LINEAR_MIPMAP_LINEAR`	`NEAREST_MIPMAP_LINEAR`
`TEXTURE_MAG_FILTER`	`NEAREST` or `LINEAR`	`LINEAR`
`TEXTURE_WRAP_S`	`CLAMP_TO_EDGE`, `MIRRORED_REPEAT`, or `REPEAT`	`REPEAT`
`TEXTURE_WRAP_T`	`CLAMP_TO_EDGE`, `MIRRORED_REPEAT`, or `REPEAT`	`REPEAT`

Spec

texSubImage2D 5 variants

texSubImage2D(target : Number, level : Number, xoffset : Number, yoffset : Number, format : Number, type : Number, canvas : HTMLCanvasElement) : undefined

Spec

texSubImage2D(target : Number, level : Number, xoffset : Number, yoffset : Number, format : Number, type : Number, image : HTMLImageElement) : undefined

Spec

texSubImage2D(target : Number, level : Number, xoffset : Number, yoffset : Number, format : Number, type : Number, pixels : ImageData) : undefined

Spec

texSubImage2D(target : Number, level : Number, xoffset : Number, yoffset : Number, format : Number, type : Number, video : HTMLVideoElement) : undefined

Spec

texSubImage2D(target : Number, level : Number, xoffset : Number, yoffset : Number, width : Number, height : Number, format : Number, type : Number, pixels : ArrayBufferView) : undefined

The loaded data is affected by the pixelStorei() options.

Spec

uniform1f(uniformLocation : WebGLUniformLocation, x : Number) : undefined

Spec

uniform1fv 2 variants

uniform1fv(uniformLocation : WebGLUniformLocation, v : Array) : undefined

Spec

uniform1fv(uniformLocation : WebGLUniformLocation, v : Float32Array) : undefined

Spec

uniform1i(uniformLocation : WebGLUniformLocation, x : Number) : undefined

Spec

uniform1iv 2 variants

uniform1iv(uniformLocation : WebGLUniformLocation, v : Int32Array) : undefined

Spec

uniform1iv(uniformLocation : WebGLUniformLocation, v : Array) : undefined

Spec

uniform2f(uniformLocation : WebGLUniformLocation, x : Number, y : Number) : undefined

Spec

uniform2fv 2 variants

uniform2fv(uniformLocation : WebGLUniformLocation, v : Array) : undefined

Spec

uniform2fv(uniformLocation : WebGLUniformLocation, v : Float32Array) : undefined

Spec

uniform2i(uniformLocation : WebGLUniformLocation, x : Number, y : Number) : undefined

Spec

uniform2iv 2 variants

uniform2iv(uniformLocation : WebGLUniformLocation, v : Int32Array) : undefined

Spec

uniform2iv(uniformLocation : WebGLUniformLocation, v : Array) : undefined

Spec

uniform3f(uniformLocation : WebGLUniformLocation, x : Number, y : Number, z : Number) : undefined

Spec

uniform3fv 2 variants

uniform3fv(uniformLocation : WebGLUniformLocation, v : Array) : undefined

Spec

uniform3fv(uniformLocation : WebGLUniformLocation, v : Float32Array) : undefined

Spec

uniform3i(uniformLocation : WebGLUniformLocation, x : Number, y : Number, z : Number) : undefined

Spec

uniform3iv 2 variants

uniform3iv(uniformLocation : WebGLUniformLocation, v : Int32Array) : undefined

Spec

uniform3iv(uniformLocation : WebGLUniformLocation, v : Array) : undefined

Spec

uniform4f(uniforLocation : WebGLUniformLocation, x : Number, y : Number, z : Number, w : Number) : undefined