recursal/MDN huggingface dataset:
WebGLRenderingContext: copyTexImage2D() method
==============================================

 The **`WebGLRenderingContext.copyTexImage2D()`** method of the
 WebGL API copies pixels from the current
 `WebGLFramebuffer` into a 2D texture image.

Syntax
------


```js
copyTexImage2D(target, level, internalformat, x, y, width, height, border)
```

### Parameters

`target`

 A `GLenum` specifying the binding point (target) of the active texture.
 Possible values:


* `gl.TEXTURE_2D`: A two-dimensional texture.
* `gl.TEXTURE_CUBE_MAP_POSITIVE_X`: Positive X face for a cube-mapped
 texture.
* `gl.TEXTURE_CUBE_MAP_NEGATIVE_X`: Negative X face for a cube-mapped
 texture.
* `gl.TEXTURE_CUBE_MAP_POSITIVE_Y`: Positive Y face for a cube-mapped
 texture.
* `gl.TEXTURE_CUBE_MAP_NEGATIVE_Y`: Negative Y face for a cube-mapped
 texture.
* `gl.TEXTURE_CUBE_MAP_POSITIVE_Z`: Positive Z face for a cube-mapped
 texture.
* `gl.TEXTURE_CUBE_MAP_NEGATIVE_Z`: Negative Z face for a cube-mapped
 texture.

`level`

 A `GLint` specifying the level of detail. Level 0 is the base image
 level and level *n* is the n-th mipmap reduction level.


`internalformat`

 A `GLenum` specifying the color components in the texture. Possible
 values:


* `gl.ALPHA`: Discards the red, green and blue components and reads the
 alpha component.
* `gl.RGB`: Discards the alpha components and reads the red, green and
 blue components.
* `gl.RGBA`: Red, green, blue and alpha components are read from the
 color buffer.
* `gl.LUMINANCE`: Each color component is a luminance component, alpha
 is 1.0.
* `gl.LUMINANCE_ALPHA`: Each component is a luminance/alpha component.

`x`

 A `GLint` specifying the x coordinate of the lower left corner where to
 start copying.


`y`

 A `GLint` specifying the y coordinate of the lower left corner where to
 start copying.


`width`

A `GLsizei` specifying the width of the texture.

`height`

A `GLsizei` specifying the height of the texture.

`border`

A `GLint` specifying the width of the border. Must be 0.

### Return value

None (`undefined`).

Examples
--------


```js
gl.copyTexImage2D(gl.TEXTURE\_2D, 0, gl.RGBA, 0, 0, 512, 512, 0);
```

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

| Specification |
| --- |
| WebGL Specification # 5.14.8 |

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

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

See also
--------

* `WebGLRenderingContext.createTexture()`
* `WebGLRenderingContext.bindTexture()`
* `WebGLRenderingContext.texImage2D()`
* `WebGLRenderingContext.texSubImage2D()`
* `WebGLRenderingContext.compressedTexImage2D()`
WebGLRenderingContext: getSupportedExtensions() method
======================================================

 The **`WebGLRenderingContext.getSupportedExtensions()`** method
 returns a list of all the supported WebGL
 extensions.

Syntax
------


```js
getSupportedExtensions()
```

### Parameters

None.

### Return value

An `Array` of strings with all the supported WebGL extensions.

Examples
--------


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

const extensions = gl.getSupportedExtensions();
// Array [ 'ANGLE\_instanced\_arrays', 'EXT\_blend\_minmax', … ]
```


 See also the `WebGLRenderingContext.getExtension()` method to get a
 specific extension object.

WebGL extensions
----------------

Extensions for the WebGL API are registered in the WebGL Extension Registry. They are also listed here.

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

| Specification |
| --- |
| WebGL Specification # 5.14.14 |

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

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

See also
--------

* `WebGLRenderingContext.getExtension()`
* webglreport.com
WebGLRenderingContext: createBuffer() method
============================================

 The **`WebGLRenderingContext.createBuffer()`** method of the WebGL API creates and initializes a
 `WebGLBuffer` storing data such as vertices or colors.

Syntax
------


```js
createBuffer()
```

### Parameters

None.

### Return value

A `WebGLBuffer` storing data such as vertices or colors.

Examples
--------

### Creating a buffer


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

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

| Specification |
| --- |
| WebGL Specification # 5.14.5 |

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

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

See also
--------

* `WebGLRenderingContext.bindBuffer()`
* `WebGLRenderingContext.deleteBuffer()`
* `WebGLRenderingContext.isBuffer()`
* Other buffers: `WebGLFramebuffer`, `WebGLRenderbuffer`
WebGLRenderingContext: getAttribLocation() method
=================================================

 The **`WebGLRenderingContext.getAttribLocation()`** method of
 the WebGL API returns the location of an
 attribute variable in a given `WebGLProgram`.

Syntax
------


```js
getAttribLocation(program, name)
```

### Parameters

`program`

A `WebGLProgram` containing the attribute variable.

`name`

 A string specifying the name of the attribute variable whose
 location to get.


### Return value

 A `GLint` number indicating the location of the variable name if found.
 Returns -1 otherwise.

Examples
--------


```js
gl.getAttribLocation(program, "vColor");
```

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

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

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

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

See also
--------

* `WebGLRenderingContext.getUniformLocation()`
WebGLRenderingContext: deleteRenderbuffer() method
==================================================

 The **`WebGLRenderingContext.deleteRenderbuffer()`** method of
 the WebGL API deletes a given
 `WebGLRenderbuffer` object. This method has no effect if the render buffer
 has already been deleted.

Syntax
------


```js
deleteRenderbuffer(renderbuffer)
```

### Parameters

`renderbuffer`

A `WebGLRenderbuffer` object to delete.

### Return value

None (`undefined`).

Examples
--------

### Deleting a renderbuffer


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

// …

gl.deleteRenderbuffer(renderbuffer);
```

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

| Specification |
| --- |
| WebGL Specification # 5.14.7 |

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

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

See also
--------

* `WebGLRenderingContext.bindRenderbuffer()`
* `WebGLRenderingContext.createRenderbuffer()`
* `WebGLRenderingContext.isRenderbuffer()`
* Other buffers: `WebGLBuffer`, `WebGLFramebuffer`
WebGLRenderingContext: disable() method
=======================================

 The **`WebGLRenderingContext.disable()`** method of the WebGL API disables specific WebGL
 capabilities for this context.

Syntax
------


```js
disable(capability)
```

### Parameters

`capability`

 A `GLenum` specifying which WebGL capability to disable. Possible
 values:


| Constant | Description |
| --- | --- |
| `gl.BLEND` | Deactivates blending of the computed fragment color values. See `WebGLRenderingContext.blendFunc()`. |
| `gl.CULL_FACE` | Deactivates culling of polygons. See `WebGLRenderingContext.cullFace()`. |
| `gl.DEPTH_TEST` | Deactivates depth comparisons and updates to the depth buffer. See `WebGLRenderingContext.depthFunc()`. |
| `gl.DITHER` | Deactivates dithering of color components before they get written to the color buffer. |
| `gl.POLYGON_OFFSET_FILL` | Deactivates adding an offset to depth values of polygon's fragments. See `WebGLRenderingContext.polygonOffset()`. |
| `gl.SAMPLE_ALPHA_TO_COVERAGE` | Deactivates the computation of a temporary coverage value determined by the alpha value. |
| `gl.SAMPLE_COVERAGE` | Deactivates ANDing the fragment's coverage with the temporary coverage value. See `WebGLRenderingContext.sampleCoverage()`. |
| `gl.SCISSOR_TEST` | Deactivates the scissor test that discards fragments that are outside of the scissor rectangle. See `WebGLRenderingContext.scissor()`. |
| `gl.STENCIL_TEST` | Deactivates stencil testing and updates to the stencil buffer. See `WebGLRenderingContext.stencilFunc()`. |

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


| Constant | Description |
| --- | --- |
| `gl.RASTERIZER_DISCARD` | Deactivates that primitives are discarded immediately before the rasterization stage, but after the optional transform feedback stage. `gl.clear()` commands are ignored. |

### Return value

None (`undefined`).

Examples
--------


```js
gl.disable(gl.DITHER);
```


 To check if a capability is disabled, use the
 `WebGLRenderingContext.isEnabled()` method:


```js
gl.isEnabled(gl.DITHER);
// false
```

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

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

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

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

See also
--------

* `WebGLRenderingContext.enable()`
* `WebGLRenderingContext.isEnabled()`
WebGLRenderingContext: depthFunc() method
=========================================

 The **`WebGLRenderingContext.depthFunc()`** method of the WebGL API specifies a function that compares
 incoming pixel depth to the current depth buffer value.

Syntax
------


```js
depthFunc(func)
```

### Parameters

`func`

 A `GLenum` specifying the depth comparison function, which sets the
 conditions under which the pixel will be drawn. The default value is
 `gl.LESS`. Possible values are:


* `gl.NEVER` (never pass)
* `gl.LESS` (pass if the incoming value is less than the depth buffer
 value)
* `gl.EQUAL` (pass if the incoming value equals the depth buffer value)
* `gl.LEQUAL` (pass if the incoming value is less than or equal to the
 depth buffer value)
* `gl.GREATER` (pass if the incoming value is greater than the depth
 buffer value)
* `gl.NOTEQUAL` (pass if the incoming value is not equal to the depth
 buffer value)
* `gl.GEQUAL` (pass if the incoming value is greater than or equal to
 the depth buffer value)
* `gl.ALWAYS` (always pass)

### Return value

None (`undefined`).

Examples
--------

 The depth testing is disabled by default. To enable or disable depth testing, use the
 `enable()` and
 `disable()` methods with the argument
 `gl.DEPTH_TEST`.


```js
gl.enable(gl.DEPTH\_TEST);
gl.depthFunc(gl.NEVER);
```


To check the current depth function, query the `DEPTH_FUNC` constant.


```js
gl.getParameter(gl.DEPTH\_FUNC) === gl.NEVER;
// true
```

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

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

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

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

See also
--------

* `WebGLRenderingContext.enable()`
WebGLRenderingContext: createTexture() method
=============================================

 The **`WebGLRenderingContext.createTexture()`** method of the
 WebGL API creates and initializes a
 `WebGLTexture` object.

Syntax
------


```js
createTexture()
```

### Parameters

None.

### Return value

A `WebGLTexture` object to which images can be bound to.

Examples
--------

See also the WebGL tutorial on Using textures in WebGL.

### Creating a texture


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

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

| Specification |
| --- |
| WebGL Specification # 5.14.8 |

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

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

See also
--------

* `WebGLRenderingContext.bindTexture()`
* `WebGLRenderingContext.deleteTexture()`
* `WebGLRenderingContext.isTexture()`
* `WebGLRenderingContext.texImage2D()`
WebGLRenderingContext: getShaderPrecisionFormat() method
========================================================

 The
 **`WebGLRenderingContext.getShaderPrecisionFormat()`** method of
 the WebGL API returns a new
 `WebGLShaderPrecisionFormat` object describing the range and precision for
 the specified shader numeric format.

Syntax
------


```js
getShaderPrecisionFormat(shaderType, precisionType)
```

### Parameters

`shaderType`

Either a `gl.FRAGMENT_SHADER` or a `gl.VERTEX_SHADER`.

`precisionType`

 A precision type value. Either `gl.LOW_FLOAT`,
 `gl.MEDIUM_FLOAT`, `gl.HIGH_FLOAT`, `gl.LOW_INT`,
 `gl.MEDIUM_INT`, or `gl.HIGH_INT`.


### Return value

 A `WebGLShaderPrecisionFormat` object or `null`, if an error
 occurs.

### Exceptions

* `gl.INVALID_ENUM` if the shader or precision types aren't recognized.
* `gl.INVALID_OPERATION` if the shader compiler isn't supported.
Examples
--------

 The following code gets the precision format of a `gl.VERTEX_SHADER` with a
 `gl.MEDIUM_FLOAT` precision type.


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

gl.getShaderPrecisionFormat(gl.VERTEX\_SHADER, gl.MEDIUM\_FLOAT);
// WebGLShaderPrecisionFormat { rangeMin: 127, rangeMax: 127, precision: 23 }
```

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

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

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

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

See also
--------

* `WebGLShaderPrecisionFormat`
WebGLRenderingContext: stencilFuncSeparate() method
===================================================

 The **`WebGLRenderingContext.stencilFuncSeparate()`** method of
 the WebGL API sets the front and/or back
 function and reference value for stencil testing.

 Stencilling enables and disables drawing on a per-pixel basis. It is typically used in
 multipass rendering to achieve special effects.

Syntax
------


```js
stencilFuncSeparate(face, func, ref, mask)
```

### Parameters

`face`

 A `GLenum` specifying whether the front and/or back stencil state is
 updated. The possible values are:


* `gl.FRONT`
* `gl.BACK`
* `gl.FRONT_AND_BACK`

`func`

 A `GLenum` specifying the test function. The default function is
 `gl.ALWAYS`. The possible values are:


* `gl.NEVER`: Never pass.
* `gl.LESS`: Pass if `(ref & mask) < (stencil & mask)`.
* `gl.EQUAL`: Pass if `(ref & mask) = (stencil & mask)`.
* `gl.LEQUAL`: Pass if `(ref & mask) <= (stencil & mask)`.
* `gl.GREATER`: Pass if `(ref & mask) > (stencil & mask)`.
* `gl.NOTEQUAL`: Pass if `(ref & mask) !== (stencil & mask)`.
* `gl.GEQUAL`: Pass if `(ref & mask) >= (stencil & mask)`.
* `gl.ALWAYS`: Always pass.

`ref`

 A `GLint` specifying the reference value for the stencil test. This
 value is clamped to the range 0 to 2^n - 1 where n is the number of bitplanes
 in the stencil buffer. The default value is 0.


`mask`

 A `GLuint` specifying a bit-wise mask that is used to AND the reference
 value and the stored stencil value when the test is done. The default value is all 1.


### Return value

None (`undefined`).

Examples
--------

 The stencil testing is disabled by default. To enable or disable stencil testing, use
 the `enable()` and
 `disable()` methods with the argument
 `gl.STENCIL_TEST`.


```js
gl.enable(gl.STENCIL\_TEST);
gl.stencilFuncSeparate(gl.FRONT, gl.LESS, 0.2, 1110011);
```


 To get the current stencil function, reference value, or other stencil information,
 query the following constants with `getParameter()`.


```js
gl.getParameter(gl.STENCIL\_FUNC);
gl.getParameter(gl.STENCIL\_VALUE\_MASK);
gl.getParameter(gl.STENCIL\_REF);
gl.getParameter(gl.STENCIL\_BACK\_FUNC);
gl.getParameter(gl.STENCIL\_BACK\_VALUE\_MASK);
gl.getParameter(gl.STENCIL\_BACK\_REF);
gl.getParameter(gl.STENCIL\_BITS);
```

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

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

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

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

See also
--------

* `WebGLRenderingContext.stencilFunc()`
* `WebGLRenderingContext.stencilMask()`
* `WebGLRenderingContext.stencilMaskSeparate()`
* `WebGLRenderingContext.stencilOp()`
* `WebGLRenderingContext.stencilOpSeparate()`
WebGLRenderingContext: clear() method
=====================================

The **`WebGLRenderingContext.clear()`** method of the WebGL API clears buffers to preset values.

 The preset values can be set by `clearColor()`, `clearDepth()` or
 `clearStencil()`.

 The scissor box, dithering, and buffer writemasks can affect the `clear()`
 method.

Syntax
------


```js
clear(mask)
```

### Parameters

`mask`

 A `GLbitfield` bitwise OR mask that indicates the buffers to be
 cleared. Possible values are:


* `gl.COLOR_BUFFER_BIT`
* `gl.DEPTH_BUFFER_BIT`
* `gl.STENCIL_BUFFER_BIT`

### Return value

None (`undefined`).

### Exceptions

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

Examples
--------

The `clear()` method accepts multiple values.


```js
gl.clear(gl.DEPTH\_BUFFER\_BIT);
gl.clear(gl.DEPTH\_BUFFER\_BIT | gl.COLOR\_BUFFER\_BIT);
```


 To get the current clear values, query the `COLOR_CLEAR_VALUE`,
 `DEPTH_CLEAR_VALUE`, and `STENCIL_CLEAR_VALUE` constants.


```js
gl.getParameter(gl.COLOR\_CLEAR\_VALUE);
gl.getParameter(gl.DEPTH\_CLEAR\_VALUE);
gl.getParameter(gl.STENCIL\_CLEAR\_VALUE);
```

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

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

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

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

See also
--------

* `WebGLRenderingContext.clearColor()`
* `WebGLRenderingContext.clearDepth()`
* `WebGLRenderingContext.clearStencil()`
Canvas tutorial
===============

This tutorial describes how to use the **`<canvas>`** element to draw 2D graphics, starting with the basics. The examples provided should give you some clear ideas about what you can do with canvas, and will provide code snippets that may get you started in building your own content.

`<canvas>` is an HTML element which can be used to draw graphics via scripting (usually JavaScript). This can, for instance, be used to draw graphs, combine photos, or create simple animations.

First introduced in WebKit by Apple for the macOS Dashboard, `<canvas>` has since been implemented in browsers. Today, all major browsers support it.

Before you start
----------------

Using the `<canvas>` element is not very difficult, but you do need a basic understanding of HTML and JavaScript. The `<canvas>` element is not supported in some older browsers, but is supported in recent versions of all major browsers. The default size of the canvas is 300 pixels × 150 pixels (width × height). But custom sizes can be defined using the HTML `height` and `width` property. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.

In this tutorial
----------------

1. Basic usage
2. Drawing shapes
3. Applying styles and colors
4. Drawing text
5. Using images
6. Transformations
7. Compositing and clipping
8. Basic animations
9. Advanced animations
10. Pixel manipulation
11. Optimizing the canvas
12. Finale
See also
--------

* Canvas topic page
* HTML5CanvasTutorials
A note to contributors
----------------------

Due to an unfortunate technical error that occurred the week of June 17, 2013, we lost the history of this tutorial, including attributions to all past contributors to its content. We apologize for this, and hope you'll forgive this unfortunate mishap.

* Next »
Finale
======

* « Previous

Congratulations! You finished the Canvas tutorial! This knowledge will help you to make great 2D graphics on the web.

More examples and tutorials
---------------------------

There are a variety of demos and further explanations about canvas on these sites:

Canvas Codepens

Front End Developer Playground & Code Editor in the Browser.

Canvas Tutorials

Examples for most canvas APIs.

Game development

Gaming is one of the most popular computer activities. New technologies are constantly arriving to make it possible to develop better and more powerful games that can be run in any standards-compliant web browser.

Other Web APIs
--------------

These APIs might be useful when working further with canvas and graphics:

WebGL

Advanced API for rendering complex graphics, including 3D.

SVG

Scalable Vector Graphics let you describe images as sets of vectors (lines) and shapes in order to allow them to scale smoothly regardless of the size at which they're drawn.

Web Audio

The Web Audio API provides a powerful and versatile system for controlling audio on the Web, allowing developers to choose audio sources, add effects to audio, create audio visualizations, apply spatial effects (such as panning) and much more.

Questions
---------

Stack Overflow

Questions tagged with "canvas".

Comments about this tutorial – the MDN documentation community

If you have any comments about this tutorial or want to thank us, feel free to reach out to us!

* « Previous
CSSConditionRule: conditionText property
========================================

 The **`conditionText`** property of
 the `CSSConditionRule` interface returns or sets the text of the CSS
 rule.

Value
-----

A string.

Examples
--------

 The following example demonstrates getting and setting the value of
 `conditionText` on a `CSSMediaRule` which implements the
 `CSSConditionRule` interface.


```css
@media (min-width: 500px) {
  body {
    color: blue;
  }
}
```



```js
let myRules = document.styleSheets[0].cssRules;
let text = myRules[0].conditionText;
console.log(text); // "(min-width: 500px)"
text = "(min-width: 400px)";
console.log(text); // "(min-width: 400px)"
```

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

| Specification |
| --- |
| CSS Conditional Rules Module Level 3 # dom-cssconditionrule-conditiontext |

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

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

See also
--------

* Using dynamic styling information
SVGMaskElement: width property
==============================

The read-only **`width`** property of the `SVGMaskElement` interface returns an `SVGAnimatedLength` object containing the value of the `width` attribute of the `<marker>`.

**Note:** Although this property is read-only, it is merely a container for two values you can modify, `baseVal` and `animVal`.

Value
-----

An `SVGAnimatedLength` object. The `baseVal` property of this object returns an `SVGLength`, the value of which returns the `width` value.

Examples
--------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<div>
  <svg viewBox="-10 -10 120 120" width="100" height="100">
    <mask id="mask" x="0" maskUnits="objectBoundingBox">
      <!-- Everything under a white pixel will be visible -->
      <rect x="0" y="0" width="100" height="100" fill="white" />

      <!-- Everything under a black pixel will be invisible -->
      <path
 d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
 fill="black" />
      <animate
 attributeName="width"
 values="144;0;144"
 dur="5s"
 repeatCount="indefinite" />
    </mask>

    <polygon points="-10,110 110,110 110,-10" fill="orange" />

    <!-- with this mask applied, we "punch" a heart shape hole into the circle -->
    <circle cx="50" cy="50" r="50" mask="url(#mask)" />
  </svg>
</div>
<pre id="log"></pre>
```



```js
const mask = document.getElementById("mask");

function displayLog() {
  const animValue = mask.width.animVal.value;
  const baseValue = mask.width.baseVal.value;
  log.textContent = `The 'width.animVal' is ${animValue}.\n`;
  log.textContent += `The 'width.baseVal' is ${baseValue}.`;
  requestAnimationFrame(displayLog);
}
displayLog();
```

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

| Specification |
| --- |
| CSS Masking Module Level 1 # dom-svgmaskelement-width |

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

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