W3cubDocs

/DOM

WebGLRenderingContext.readPixels

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.

Syntax

// 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);

Parameters

x
A GLint specifying the first horizontal pixel that is read from the lower left corner of a rectangular block of pixels.
y
A GLint specifying the first vertical pixel that is read from the lower left corner of a rectangular block of pixels.
width
A GLsizei specifying the width of the rectangle.
height
A GLsizei specifying the height of the rectangle.
format
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.
type
A GLenum specifying the data type of the pixel data. Possible values:
  • gl.UNSIGNED_BYTE
  • gl.UNSIGNED_SHORT_5_6_5
  • gl.UNSIGNED_SHORT_4_4_4_4
  • gl.UNSIGNED_SHORT_5_5_5_1
  • gl.FLOAT
pixels
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

None.

Exceptions

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

Examples

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

Specifications

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

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 9 12 4 11 12 5.1
WebGL2 56 No 51 No 43 No
Feature Android webview Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
Basic support Yes 25 Yes Yes 11 12 8.1
WebGL2 58 58 No 51 No 43 No

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/readPixels