WebGLRenderingContext: texImage2D() method
==========================================

 The **`WebGLRenderingContext.texImage2D()`** method of the WebGL API specifies a two-dimensional texture
 image.

Syntax
------


```js
// WebGL1
texImage2D(target, level, internalformat, width, height, border, format, type, pixels)
texImage2D(target, level, internalformat, format, type, pixels)

// WebGL2
texImage2D(target, level, internalformat, width, height, border, format, type, offset)
texImage2D(target, level, internalformat, width, height, border, format, type, source)
texImage2D(target, level, internalformat, width, height, border, format, type, srcData, srcOffset)
```

### 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 in both WebGL1 and WebGL2

| Format | Type | Channels | Bytes per pixel |
| RGBA | UNSIGNED\_BYTE | 4 | 4 |
| RGB | UNSIGNED\_BYTE | 3 | 3 |
| RGBA | UNSIGNED\_SHORT\_4\_4\_4\_4 | 4 | 2 |
| RGBA | UNSIGNED\_SHORT\_5\_5\_5\_1 | 4 | 2 |
| RGB | UNSIGNED\_SHORT\_5\_6\_5 | 3 | 2 |
| LUMINANCE\_ALPHA | UNSIGNED\_BYTE | 2 | 2 |
| LUMINANCE | UNSIGNED\_BYTE | 1 | 1 |
| ALPHA | UNSIGNED\_BYTE | 1 | 1 |

 Other possible values in WebGL2 for the versions of `texImage2D` that
 take a `TypedArray` or a `DataView`, or a `GLintptr offset`


| **SizedFormat** | **BaseFormat** | **Rbits** | **Gbits** | **Bbits** | **Abits** | **Sharedbits** | **Colorrenderable** | **Texturefilterable** |
| R8 | RED | 8 |  |  |  |  | ● | ● |
| R8\_SNORM | RED | s8 |  |  |  |  |  | ● |
| RG8 | RG | 8 | 8 |  |  |  | ● | ● |
| RG8\_SNORM | RG | s8 | s8 |  |  |  |  | ● |
| RGB8 | RGB | 8 | 8 | 8 |  |  | ● | ● |
| RGB8\_SNORM | RGB | s8 | s8 | s8 |  |  |  | ● |
| RGB565 | RGB | 5 | 6 | 5 |  |  | ● | ● |
| RGBA4 | RGBA | 4 | 4 | 4 | 4 |  | ● | ● |
| RGB5\_A1 | RGBA | 5 | 5 | 5 | 1 |  | ● | ● |
| RGBA8 | RGBA | 8 | 8 | 8 | 8 |  | ● | ● |
| RGBA8\_SNORM | RGBA | s8 | s8 | s8 | s8 |  |  | ● |
| RGB10\_A2 | RGBA | 10 | 10 | 10 | 2 |  | ● | ● |
| RGB10\_A2UI | RGBA | ui10 | ui10 | ui10 | ui2 |  | ● |  |
| SRGB8 | RGB | 8 | 8 | 8 |  |  |  | ● |
| SRGB8\_ALPHA8 | RGBA | 8 | 8 | 8 | 8 |  | ● | ● |
| R16F | RED | f16 |  |  |  |  |  | ● |
| RG16F | RG | f16 | f16 |  |  |  |  | ● |
| RGB16F | RGB | f16 | f16 | f16 |  |  |  | ● |
| RGBA16F | RGBA | f16 | f16 | f16 | f16 |  |  | ● |
| R32F | RED | f32 |  |  |  |  |  |  |
| RG32F | RG | f32 | f32 |  |  |  |  |  |
| RGB32F | RGB | f32 | f32 | f32 |  |  |  |  |
| RGBA32F | RGBA | f32 | f32 | f32 | f32 |  |  |  |
| R11F\_G11F\_B10F | RGB | f11 | f11 | f10 |  |  |  | ● |
| RGB9\_E5 | RGB | 9 | 9 | 9 |  | 5 |  | ● |
| R8I | RED | i8 |  |  |  |  | ● |  |
| R8UI | RED | ui8 |  |  |  |  | ● |  |
| R16I | RED | i16 |  |  |  |  | ● |  |
| R16UI | RED | ui16 |  |  |  |  | ● |  |
| R32I | RED | i32 |  |  |  |  | ● |  |
| R32UI | RED | ui32 |  |  |  |  | ● |  |
| RG8I | RG | i8 | i8 |  |  |  | ● |  |
| RG8UI | RG | ui8 | ui8 |  |  |  | ● |  |
| RG16I | RG | i16 | i16 |  |  |  | ● |  |
| RG16UI | RG | ui16 | ui16 |  |  |  | ● |  |
| RG32I | RG | i32 | i32 |  |  |  | ● |  |
| RG32UI | RG | ui32 | ui32 |  |  |  | ● |  |
| RGB8I | RGB | i8 | i8 | i8 |  |  |  |  |
| RGB8UI | RGB | ui8 | ui8 | ui8 |  |  |  |  |
| RGB16I | RGB | i16 | i16 | i16 |  |  |  |  |
| RGB16UI | RGB | ui16 | ui16 | ui16 |  |  |  |  |
| RGB32I | RGB | i32 | i32 | i32 |  |  |  |  |
| RGB32UI | RGB | ui32 | ui32 | ui32 |  |  |  |  |
| RGBA8I | RGBA | i8 | i8 | i8 | i8 |  | ● |  |
| RGBA8UI | RGBA | ui8 | ui8 | ui8 | ui8 |  | ● |  |
| RGBA16I | RGBA | i16 | i16 | i16 | i16 |  | ● |  |
| RGBA16UI | RGBA | ui16 | ui16 | ui16 | ui16 |  | ● |  |
| RGBA32I | RGBA | i32 | i32 | i32 | i32 |  | ● |  |
| RGBA32UI | RGBA | ui32 | ui32 | ui32 | ui32 |  | ● |  |

 Possible values in WebGL2 for the versions of `texImage2D` that take a
 texture an `HTMLImageElement`, `HTMLCanvasElement`,
 `HTMLVideoElement`, `ImageBitmap`, or `ImageData`

* `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.

When using the `WEBGL_depth_texture` extension:

* `gl.DEPTH_COMPONENT`
* `gl.DEPTH_STENCIL`

When using the `EXT_sRGB` extension:

* `ext.SRGB_EXT`
* `ext.SRGB_ALPHA_EXT`

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


* `gl.R8`
* `gl.R16F`
* `gl.R32F`
* `gl.R8UI`
* `gl.RG8`
* `gl.RG16F`
* `gl.RG32F`
* `gl.RG8UI`
* `gl.RG16UI`
* `gl.RG32UI`
* `gl.RGB8`
* `gl.SRGB8`
* `gl.RGB565`
* `gl.R11F_G11F_B10F`
* `gl.RGB9_E5`
* `gl.RGB16F`
* `gl.RGB32F`
* `gl.RGB8UI`
* `gl.RGBA8`
* `gl.SRGB8_ALPHA8`
* `gl.RGB5_A1`
* `gl.RGB10_A2`
* `gl.RGBA4`
* `gl.RGBA16F`
* `gl.RGBA32F`
* `gl.RGBA8UI`

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

`format`

 A `GLenum` specifying the format of the texel data. In WebGL 1, this
 must be the same as `internalformat` (see above). in WebGL 2, the
 combinations are listed in this table.


`type`

A `GLenum` specifying the data type of the texel data. Possible values:

* `gl.UNSIGNED_BYTE`: 8 bits per channel for `gl.RGBA`
* `gl.UNSIGNED_SHORT_5_6_5`: 5 red bits, 6 green bits, 5 blue bits.
* `gl.UNSIGNED_SHORT_4_4_4_4`: 4 red bits, 4 green bits, 4 blue bits, 4
 alpha bits.
* `gl.UNSIGNED_SHORT_5_5_5_1`: 5 red bits, 5 green bits, 5 blue bits, 1
 alpha bit.

When using the `WEBGL_depth_texture` extension:

* `gl.UNSIGNED_SHORT`
* `gl.UNSIGNED_INT`
* `ext.UNSIGNED_INT_24_8_WEBGL` (constant provided by the extension)
* When using the `OES_texture_float` extension:
    + `gl.FLOAT`

When using the `OES_texture_half_float` extension:

* `ext.HALF_FLOAT_OES` (constant provided by the extension)

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


* `gl.BYTE`
* `gl.UNSIGNED_SHORT`
* `gl.SHORT`
* `gl.UNSIGNED_INT`
* `gl.INT`
* `gl.HALF_FLOAT`
* `gl.FLOAT`
* `gl.UNSIGNED_INT_2_10_10_10_REV`
* `gl.UNSIGNED_INT_10F_11F_11F_REV`
* `gl.UNSIGNED_INT_5_9_9_9_REV`
* `gl.UNSIGNED_INT_24_8`
* `gl.FLOAT_32_UNSIGNED_INT_24_8_REV` (pixels must be
 `null`)

`pixels`

The following types can always be used as a pixel source for the texture:

* `ImageData`,
* `HTMLImageElement`,
* `HTMLCanvasElement`,
* `HTMLVideoElement`,
* `ImageBitmap`.

The following types can only be used as a pixel source when `width`, `height`, and `border` are specified:

* `Uint8Array` (must be used if `type` is `gl.UNSIGNED_BYTE`)
* `Uint16Array` (must be used if `type` is either
 `gl.UNSIGNED_SHORT_5_6_5`, `gl.UNSIGNED_SHORT_4_4_4_4`,
 `gl.UNSIGNED_SHORT_5_5_5_1`, `gl.UNSIGNED_SHORT` or
 `ext.HALF_FLOAT_OES`)
* `Uint32Array` (must be used if `type` is `gl.UNSIGNED_INT` or `ext.UNSIGNED_INT_24_8_WEBGL`)
* `Float32Array` (must be used if `type` is `gl.FLOAT`)

`offset`

 (WebGL 2 only) A `GLintptr` byte offset into the
 `WebGLBuffer`'s data store. Used to upload data to the currently bound
 `WebGLTexture` from the `WebGLBuffer` bound to the
 `PIXEL_UNPACK_BUFFER` target.


### Return value

None (`undefined`).

Examples
--------


```js
gl.texImage2D(gl.TEXTURE\_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED\_BYTE, image);
```

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

| Specification |
| --- |
| WebGL Specification # 5.14.8 |
| WebGL 2.0 Specification # 3.7.6 |

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

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

See also
--------

* `WebGLRenderingContext.createTexture()`
* `WebGLRenderingContext.bindTexture()`
* `WebGLRenderingContext.texSubImage2D()`
* `WebGLRenderingContext.compressedTexImage2D()`
* `WebGLRenderingContext.copyTexImage2D()`
* `WebGLRenderingContext.getTexParameter()`
* `WEBGL_depth_texture`
* `OES_texture_float`
* `OES_texture_half_float`
* `EXT_texture_norm16`
* `EXT_sRGB`