Вы читаете английскую версию этой статьи, так как пока нет перевода на данный язык. Помогите нам перевести эту статью!

The WebGLRenderingContext.readPixels() method of the WebGL API reads a block of pixels from a specified rectangle of the current color framebuffer into an ArrayBufferView object.


// WebGL1: 
void gl.readPixels(x, y, width, height, format, type, pixels); 

// WebGL2: 
void gl.readPixels(x, y, width, height, format, type, GLintptr offset); 
void gl.readPixels(x, y, width, height, format, type, ArrayBufferView pixels, GLuint dstOffset);


A GLint specifying the first horizontal pixel that is read from the lower left corner of a rectangular block of pixels.
A GLint specifying the first vertical pixel that is read from the lower left corner of a rectangular block of pixels.
A GLsizei specifying the width of the rectangle.
A GLsizei specifying the height of the rectangle.
A GLenum specifying the format of the pixel data. 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.

WebGL2 adds

  • gl.RED
  • gl.RG
A GLenum specifying the data type of the pixel data. Possible values:
  • gl.UNSIGNED_SHORT_5_6_5
  • gl.UNSIGNED_SHORT_4_4_4_4
  • gl.UNSIGNED_SHORT_5_5_5_1
  • gl.FLOAT

WebGL2 adds

  • gl.BYTE
  • gl.UNSIGNED_INT_2_10_10_10_REV
  • gl.SHORT
  • gl.INT
  • gl.UNSIGNED_INT_10F_11F_11F_REV
  • gl.UNSIGNED_INT_5_9_9_9_REV
An ArrayBufferView object to read data into. The array type must match the type of the type parameter.
dstOffset Optional
Offset. Defaults to 0.

Return value



  • A gl.INVALID_ENUM error is thrown if format or type is not an accepted value.
  • A gl.INVALID_OPERATION error is thrown if
    • type is gl.UNSIGNED_SHORT_5_6_5 and format is not gl.RGB.
    • type is gl.UNSIGNED_SHORT_4_4_4_4 and format is not gl.RGBA.
    • type does not match the typed array type of pixels.
  • A gl.INVALID_FRAMEBUFFER_OPERATION error is thrown if the currently bound framebuffer is not framebuffer complete.


var canvas = document.getElementById('canvas');
var gl = canvas.getContext('webgl');
var pixels = new Uint8Array(gl.drawingBufferWidth * gl.drawingBufferHeight * 4);
gl.readPixels(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
console.log(pixels); // Uint8Array


Specification Status Comment
WebGL 1.0
The definition of 'readPixels' in that specification.
Recommendation Initial definition.
OpenGL ES 2.0
The definition of 'glReadPixels' in that specification.
Standard Man page of the OpenGL API.

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
readPixelsChrome Full support 9Edge Full support 12Firefox Full support 4IE Full support 11Opera Full support 12Safari Full support 5.1WebView Android Full support YesChrome Android Full support 25Firefox Android Full support YesOpera Android Full support 12Safari iOS Full support 8Samsung Internet Android Full support Yes
WebGL2Chrome Full support 56Edge No support NoFirefox Full support 51IE No support NoOpera Full support 43Safari No support NoWebView Android Full support 58Chrome Android Full support 58Firefox Android Full support 51Opera Android Full support 43Safari iOS No support NoSamsung Internet Android Full support 7.0


Full support  
Full support
No support  
No support

See also