readPixels method

Reads pixel data into an ArrayBufferView object from a rectangular area in the color buffer of the active frame buffer.




WebGLRenderingContext.readPixels(x, y, width, height, format, type, pixels);


x [in]

Type: Number

Horizontal coordinate of the first pixel to read in the lower left corner of rectangle.

y [in]

Type: Number

Vertical coordinate of the first pixel to read in the lower left corner of rectangle.

width [in]

Type: Number

Width of the rectangle.

height [in]

Type: Number

Height of the rectangle.

format [in]

Type: Number

Format of the pixel data. Currently only gl.RGBA is supported.

type [in]

Type: Number

Describes the type of data being read.


Call getExtension("gl.OES_texture_float") first to enable. This creates 128bit-per-pixel textures instead of 32bit-per-pixel for the image.


pixels [in]

Type: Array

Object to read data into. One of the following types:

  • Uint8Array when used without extensions.
  • Float32Array when using the OES_texture_float extension .

Return value

This method does not return a value.


Pixels are returned in row order from lowest to the highest, left to right in each row.

Note  If pixels reside outside the frame buffer, 0 will be read for all channels.
WebGL errorDescription
gl.INVALID_ENUMIf format or type aren't accepted values.
  • If height or width are negative numbers.
  • If pixels is null.
  • If format isn't gl.RGBA and type isn't gl.UNSIGNED_BYTE
  • If pixels isn't large enough for the pixel data.
gl.INVALID_FRAMEBUFFER_OPERATIONIf the currently bound frame buffer isn't complete or the render frame buffer is invalid.


If an error is generated, no change is made to data object referenced by the pixels parameter.

See also