WebGLRenderingContext : Object

<p>

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|**HTMLCanvasElement.getContext()**%%

method.

See %%WebGLContextAttributes|**WebGLContextAttributes**%% for configuration

options you can specify when calling **getContext()**.

</p>

<p>

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

%%http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf|GLSL Specification%%.

</p>

<p>

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|http://www.khronos.org/webgl/wiki/Debugging%%

for more details.

</p>

Spec:

http://www.khronos.org/registry/webgl/specs/latest/#5.14

IDL:

http://www.khronos.org/registry/webgl/specs/latest/webgl.idl

----

instance.canvas : HTMLCanvasElement

The canvas that owns this WebGL context.

<htmlexample>

<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>

</htmlexample>

ReadOnly:

true

Spec:

http://www.khronos.org/registry/webgl/specs/latest/#5.14.1

----

prototype.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|**HTMLCanvasElement.getContext('webgl', attributes)**%%.

<htmlexample>

<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>

</htmlexample>

----

instance.drawingBufferWidth : Number

Returns the width of the owner canvas in pixels.

<htmlexample>

<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>

</htmlexample>

ReadOnly:

true

----

instance.drawingBufferHeight : Number

Returns the height of the owner canvas in pixels.

<htmlexample>

<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>

</htmlexample>

ReadOnly:

true

----

prototype.isContextLost() : Boolean

IDL:

boolean isContextLost();

----

prototype.getSupportedExtensions() : Array<String>

Returns an **Array** of %%String|**String**s%% that indicate

which extensions this canvas supports. See %%#getExtension|**getExtension()**%%.

<htmlexample>

<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>

</htmlexample>

----

prototype.getExtension(name : String) : Object

Enables the specified extension and returns an object that contains

any constants or functions provided by the extension. Call

%%#getSupportedExtensions|**getSupportedExtensions()**%%

to get an array of valid extension names. If **name** is not

in the %%/Array|**Array**%% returned by %%#getSupportedExtensions|**getSupportedExtensions()**%%,

**getExtension()** will return null.

<htmlexample>

<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>

</htmlexample>

IDL:

object getExtension(DOMString name);

----

prototype.activeTexture(unit : Number) : undefined

Set the texture unit subsequent texture operations apply to.

<html>

<dl>

<dt>

**unit**

<dd>

must be

one of %%#TEXTURE0|**TEXTURE0**%%, %%#TEXTURE1|**TEXTURE1**%%, to

**%%#getParameter|getParameter%%(gl.%%#MAX_COMBINED_TEXTURE_IMAGE_UNITS|MAX_COMBINED_TEXTURE_IMAGE_UNITS%%) - 1**.

</dl>

</html>

The default value is **TEXTURE0**.

A texture must be bound to the active texture unit using

%%#bindTexture|**bindTexture()**%%.

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glActiveTexture.xml

----

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

Attaches **shader** to **program**. A program must have both a

%%#VERTEX_SHADER|**VERTEX_SHADER**%%

and

%%#FRAGMENT_SHADER|**FRAGMENT_SHADER**%% before it can be used.

**shader** can be attached before its souce has been set.

See also %%#detachShader|**detachShader()**%%.

<htmlexample>

<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>

</htmlexample>

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glAttachShader.xml

IDL:

void attachShader(WebGLProgram program, WebGLShader shader);

----

prototype.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|**enableVertexAttribArray()**%%

or %%#vertexAttribPointer|**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|**getAttribLocation()**%% to

retrieve the automatically assigned location.

**bindAttribLocation()** must be called before calling %%#linkProgram|**linkProgram(program)**%%

and

**location** must be an integer in the range **0** to

**%%#getParameter|getParameter%%(%%#MAX_VERTEX_ATTRIBS|gl.MAX_VERTEX_ATTRIBS%%) - 1**.

<htmlexample>

<!-- 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>

</htmlexample>

IDL:

void bindAttribLocation(WebGLProgram program, GLuint index, DOMString name);

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glBindAttribLocation.xml

----

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

Sets the current buffer for **target** to **buffer**. **target**

must be either

%%#ARRAY_BUFFER|**ARRAY_BUFFER**%% or

%%#ELEMENT_ARRAY_BUFFER|**ELEMENT_ARRAY_BUFFER**%%.

Use %%#bufferData|**bufferData()**%% to fill the bound buffer with data.

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glBindBuffer.xml

IDL:

void bindBuffer(GLenum target, WebGLBuffer buffer);

----

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

Sets the current framebuffer to **framebuffer**. **target** must be

%%#FRAMEBUFFER|**FRAMEBUFFER**%%.

See %%#createFramebuffer|**createFramebuffer()**%%

for an example of using **bindFramebuffer()**.

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glBindFramebuffer.xml

IDL:

void bindFramebuffer(GLenum target, WebGLFramebuffer framebuffer);

----

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

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

%%#RENDERBUFFER|**RENDERBUFFER**%%.

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glBindRenderbuffer.xml

IDL:

void bindRenderbuffer(GLenum target, WebGLRenderbuffer renderbuffer);

----

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

Sets the specified **target** and **texture** (created with

%%#createTexture|**createTexture**%%) for

the bound texture in the active texture unit

(set through %%#activeTexture|**activeTexture()**%%

and %%#bindTexture|**bindTexture()**%%).

**target** must be one of

%%#TEXTURE_2D|**TEXTURE_2D**%% or

%%#TEXTURE_CUBE_MAP|**TEXTURE_CUBE_MAP**%%

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glBindTexture.xml

IDL:

void bindTexture(GLenum target, WebGLTexture texture);

----

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

Specifies the blend color used with %%#blendFunc|**blendFunc()**%%.

Each component must be in the range **0.0** to **1.0**.

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glBlendColor.xml

IDL:

void blendColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha);

----

prototype.blendEquation(mode : Number) : undefined

Same as %%#blendEquationSeparate|**blendEquationSeparate(mode, mode)**%%.

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glBlendEquation.xml

IDL:

void blendEquation(GLenum mode);

----

prototype.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.

<html>

<dl>

<dt>

**modeRGB** and **modeAlpha**

<dd>

must be one of

%%#FUNC_ADD|**FUNC_ADD**%%,

%%#FUNC_SUBTRACT|**FUNC_SUBTRACT**%%, or

%%#FUNC_REVERSE_SUBTRACT|**FUNC_REVERSE_SUBTRACT**%%.

</dl>

</html>

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|getParameter%%(gl.%%#BLEND_EQUATION_RGB|BLEND_EQUATION_RGB%%)**

and

**%%#getParameter|getParameter%%(gl.%%#BLEND_EQUATION_ALPHA|BLEND_EQUATION_ALPHA%%)**

to get the current values.

See %%#blendFuncSeparate|**blendFuncSeparate()**%% for how src and dst are computed.

Blending must be enabled with

**%%#enable|enable%%(%%#BLEND|BLEND%%)**.

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glBlendEquationSeparate.xml

IDL:

void blendEquationSeparate(GLenum modeRGB, GLenum modeAlpha);

----

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

Same as %%#blendFuncSeparate|**blendFuncSeparate(srcFactor, dstFactor, srcFactor, dstFactor)**%%.

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glBlendFunc.xml

IDL:

void blendFunc(GLenum sfactor, GLenum dfactor);

----

prototype.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|**blendEquationSeparate()**%%.

<html>

<dl>

<dt>

**srcRGB**, **dstRGB**, **srcAlpha**, and **dstAlpha**

<dd>

must be one of

%%#ZERO|**ZERO**%%, %%#ONE|**ONE**%%, %%#SRC_COLOR|**SRC_COLOR**%%,

%%#ONE_MINUS_SRC_COLOR|**ONE_MINUS_SRC_COLOR**%%, %%#DST_COLOR|**DST_COLOR**%%,

%%#ONE_MINUS_DST_COLOR|**ONE_MINUS_DST_COLOR**%%, %%#SRC_ALPHA|**SRC_ALPHA**%%,

%%#ONE_MINUS_SRC_ALPHA|**ONE_MINUS_SRC_ALPHA**%%, %%#DST_ALPHA|**DST_ALPHA**%%,

%%#ONE_MINUS_DST_ALPHA|**ONE_MINUS_DST_ALPHA**%%, %%#CONSTANT_COLOR|**CONSTANT_COLOR**%%,

%%#ONE_MINUS_CONSTANT_COLOR|**ONE_MINUS_CONSTANT_COLOR**%%,

%%#CONSTANT_ALPHA|**CONSTANT_ALPHA**%%,

%%#ONE_MINUS_CONSTANT_ALPHA|**ONE_MINUS_CONSTANT_ALPHA**%%, or

%%#SRC_ALPHA_SATURATE|**SRC_ALPHA_SATURATE**%%

</dl>

</html>

**srcRGB** and **srcAlpha** default to %%#ONE|**ONE**%%.

**dstRGB** and **dstAlpha** default to %%#NONE|**NONE**%%.

<p>

For traditional alpha blending, use: <br>

**gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ZERO)**.

</p>

<p>

For premultiplied alpha blending, use: <br>

**gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ZERO)**.

</p>

<p>

Use

**%%#getParameter|getParameter%%(gl.%%#BLEND_SRC_RGB|BLEND_SRC_RGB%%)**,

**%%#getParameter|getParameter%%(gl.%%#BLEND_DST_RGB|BLEND_DST_RGB%%)**,

**%%#getParameter|getParameter%%(gl.%%#BLEND_SRC_ALPHA|BLEND_SRC_ALPHA%%)**,

and

**%%#getParameter|getParameter%%(gl.%%#BLEND_DST_ALPHA|BLEND_DST_ALPHA%%)**

to get the current values.

</p>

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glBlendFuncSeparate.xml

IDL:

void blendFuncSeparate(GLenum srcRGB, GLenum dstRGB, GLenum srcAlpha, GLenum dstAlpha);

----

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

Creates the storage for the currently bound buffer.

<html>

<dl>

<dt>

**target**

<dd>

must be one of %%#ARRAY_BUFFER|**ARRAY_BUFFER**%% or %%#ELEMENT_ARRAY_BUFFER|**ELEMENT_ARRAY_BUFFER**%%.

<dt>

**size**

<dd>

the size in bytes of the buffer to allocate.

<dt>

**usage**

<dd>

must be one of

%%#STREAM_DRAW|**STREAM_DRAW**%%,

%%#STATIC_DRAW|**STATIC_DRAW**%%,

or

%%#DYNAMIC_DRAW|**DYNAMIC_DRAW**%%.

</dl>

</html>

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glBufferData.xml

IDL:

void bufferData(GLenum target, GLsizeiptr size, GLenum usage);

----

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

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glBufferData.xml

IDL:

void bufferData(GLenum target, ArrayBufferView data, GLenum usage);

----

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

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glBufferData.xml

IDL:

void bufferData(GLenum target, ArrayBuffer data, GLenum usage);

----

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

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glBufferSubData.xml

IDL:

void bufferSubData(GLenum target, GLintptr offset, ArrayBufferView data);

----

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

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glBufferSubData.xml

IDL:

void bufferSubData(GLenum target, GLintptr offset, ArrayBuffer data);

----

prototype.checkFramebufferStatus(target : Number) : Number

Returns one of the following to indicate the current status of the framebuffer:

%%#FRAMEBUFFER_COMPLETE|**FRAMEBUFFER_COMPLETE**%%,

%%#FRAMEBUFFER_INCOMPLETE_ATTACHMENT|**FRAMEBUFFER_INCOMPLETE_ATTACHMENT**%%,

%%#FRAMEBUFFER_INCOMPLETE_DIMENSIONS|**FRAMEBUFFER_INCOMPLETE_DIMENSIONS**%%,

%%#FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT|**FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT**%%,

or

%%#FRAMEBUFFER_UNSUPPORTED|**FRAMEBUFFER_UNSUPPORTED**%%.

**target** must be set to %%#FRAMEBUFFER|**gl.FRAMEBUFFER**%%.

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glCheckFramebufferStatus.xml

IDL:

GLenum checkFramebufferStatus(GLenum target);

----

prototype.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|**COLOR_BUFFER_BIT**%%,

%%#STENCIL_BUFFER_BIT|**STENCIL_BUFFER_BIT**%%, and

%%#DEPTH_BUFFER_BIT|**DEPTH_BUFFER_BIT**%%.

<htmlexample>

<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>

</htmlexample>

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glClear.xml

----

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

Specifies the color to fill the color buffer when %%#clear|**clear()**%% is

called with the %%#COLOR_BUFFER_BIT|**COLOR_BUFFER_BIT**%%. The parameters

are clamped to the range **0** to **1**.

<htmlexample>

<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>

</htmlexample>

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glClearColor.xml

----

prototype.clearDepth(depth : Number) : undefined

Specifies the value to fill the depth buffer when %%#clear|**clear()**%% is called

with the %%#DEPTH_BUFFER_BIT|**DEPTH_BUFFER_BIT**%%. **depth** is clamped to

the range **0** (near) to **1** (far). Defaults to **1** if not specified.

<htmlexample>

<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>

</htmlexample>

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glClearDepthf.xml

----

prototype.clearStencil(s : Number) : undefined

Specifies the value (integer) to fill the depth buffer when %%#clear|**clear()**%% is called

with the %%#STENCIL_BUFFER_BIT|**STENCIL_BUFFER_BIT**%%.

<htmlexample>

<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>

</htmlexample>

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glClearStencil.xml

----

prototype.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|getParameter%%(gl.%%#COLOR_WRITEMASK|COLOR_WRITEMASK%%)**

to get the current value.

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glColorMask.xml

IDL:

void colorMask(GLboolean red, GLboolean green, GLboolean blue, GLboolean alpha);

----

prototype.compileShader(shader : WebGLShader) : undefined

Compiles the specified shader. Must be called after setting the source with

%%#shaderSource|**shaderSource()**%%.

If the shader had errors during compilation,

**%%#getShaderParameter|gl.getShaderParameter%%(shader, %%#COMPILE_STATUS|gl.COMPILE_STATUS%%)**

will return **false** and you can use

%%#getShaderInfoLog|**getShaderInfoLog()**%%

to get details about the error.

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glCompileShader.xml

IDL:

void compileShader(WebGLShader shader);

----

prototype.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|**activeTexture()**%%

and %%#bindTexture|**bindTexture()**%%).

<html>

<dl>

<dt>

**target**

<dd>

must be one of %%#TEXTURE_2D|**TEXTURE_2D**%%,

%%#TEXTURE_CUBE_MAP_POSITIVE_X|**TEXTURE_CUBE_MAP_POSITIVE_X**%%,

%%#TEXTURE_CUBE_MAP_NEGATIVE_X|**TEXTURE_CUBE_MAP_NEGATIVE_X**%%,

%%#TEXTURE_CUBE_MAP_POSITIVE_Y|**TEXTURE_CUBE_MAP_POSITIVE_Y**%%,

%%#TEXTURE_CUBE_MAP_NEGATIVE_Y|**TEXTURE_CUBE_MAP_NEGATIVE_Y**%%,

%%#TEXTURE_CUBE_MAP_POSITIVE_Z|**TEXTURE_CUBE_MAP_POSITIVE_Z**%%,

or %%#TEXTURE_CUBE_MAP_NEGATIVE_Z|**TEXTURE_CUBE_MAP_NEGATIVE_Z**%%.

<dt>

**level**

<dd>

specifies the mipmap level to copy into.

<dt>

**internalformat**

<dd>

%%#ALPHA|**ALPHA**%%,

%%#LUMINANCE|**LUMINANCE**%%,

%%#LUMINANCE_ALPHA|**LUMINANCE_ALPHA**%%,

%%#RGB|**RGB**%%,

or %%#RGBA|**RGBA**%%.

<dt>

**x**, **y**, **width**, **height**

<dd>

the rectangle in framebuffer to copy.

<dt>

**border**

<dd>

must be **0**.

</dl>

</html>

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glCopyTexImage2D.xml

IDL:

void copyTexImage2D(GLenum target, GLint level, GLenum internalformat, GLint x, GLint y, GLsizei width, GLsizei height, GLint border);

----

prototype.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|**activeTexture()**%%

and %%#bindTexture|**bindTexture()**%%).

<html>

<dl>

<dt>

**target**

<dd>

must be one of %%#TEXTURE_2D|**TEXTURE_2D**%%,

%%#TEXTURE_CUBE_MAP_POSITIVE_X|**TEXTURE_CUBE_MAP_POSITIVE_X**%%,

%%#TEXTURE_CUBE_MAP_NEGATIVE_X|**TEXTURE_CUBE_MAP_NEGATIVE_X**%%,

%%#TEXTURE_CUBE_MAP_POSITIVE_Y|**TEXTURE_CUBE_MAP_POSITIVE_Y**%%,

%%#TEXTURE_CUBE_MAP_NEGATIVE_Y|**TEXTURE_CUBE_MAP_NEGATIVE_Y**%%,

%%#TEXTURE_CUBE_MAP_POSITIVE_Z|**TEXTURE_CUBE_MAP_POSITIVE_Z**%%,

or %%#TEXTURE_CUBE_MAP_NEGATIVE_Z|**TEXTURE_CUBE_MAP_NEGATIVE_Z**%%.

<dt>

**level**

<dd>

specifies the mipmap level to copy into.

<dt>

**textureX**, **textureY**

<dd>

the position in the texture to store the copied pixels.

<dt>

**framebufferX**, **framebufferY**

<dd>

the position in the framebuffer to read the pixels to copy.

<dt>

**width**, **height**

<dd>

the size of the region to copy.

</dl>

</html>

Spec:

http://www.khronos.org/opengles/sdk/docs/man/xhtml/glCopyTexSubImage2D.xml

IDL:

void copyTexSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLint x, GLint y, GLsizei width, GLsizei height);

----

prototype.createBuffer() : WebGLBuffer

Creates a buffer. A buffer is memory used to store data

passed to the shader program through attributes.

See also

%%#bindBuffer|**bindBuffer()**%%,

%%#bufferData|**bufferData()**%%,

%%#bufferSubData|**bufferSubData()**%%,

%%#deleteBuffer|**deleteBuffer()**%%,

%%#isBuffer|**isBuffer()**%%,

%%#vertexAttribPointer|**vertexAttribPointer()**%%

and

%%#enableVertexAttribArray|**enableVertexAttribArray()**%%.

<htmlexample>

<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>

</htmlexample>

IDL:

WebGLBuffer createBuffer();

----

prototype.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|**WebGLRenderbuffer**%% or

%%WebGLTexture|**WebGLTexture**%%.

See also

%%#bindFramebuffer|**bindFramebuffer()**%%,

%%#checkFramebufferStatus|**checkFramebufferStatus()**%%,

%%#deleteFramebuffer|**deleteFramebuffer()**%%,

%%#framebufferRenderbuffer|**framebufferRenderbuffer()**%%,

%%#framebufferTexture2D|**framebufferTexture2D()**%%,

%%#getFramebufferAttachmentParameter|**getFramebufferAttachmentParameter()**%%,

and

%%#isFramebuffer|**isFramebuffer()**%%.

<htmlexample>

<!-- 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;