This image shows four squares that have been drawn using textures that were created from pixel data. That is, the color values for the textures were stored in an Uint8Array, and the array was used to create the texture using a version of gl.texImage2D that takes the image data from an array.

The square on the left uses a 16-by-16 texture, made up of four 8-by-8 squares of different colors. The square is covered by one copy of the texture. Note the blending of colors along the edges between the subsquares. The blending is cause by the magnification filter, which is set to gl.LINEAR. There is blending even along the outer edges of the square because the texture repeat mode is gl.REPEAT.

The next square uses the same texture, but with the magnification filter set to gl.NEAREST. This eliminates the blending.

The third and fourth squares use a tiny 2-by-2 texture with the gl.LUMINANCE format, which requires only one byte per pixel. The texture is repeated ten times horizontally and ten times vertically on the square. The third square uses gl.LINEAR as the magnification filter. The fourth uses gl.NEAREST.

For the final square, a 256-by-1 gl.LUMINANCE texture was uses. The texture is given by an array of 256 bytes, with values increasing from 0 to 255. One copy of the texture is used on the square, giving a gradient effect.