An array containing the color of each pixel on the canvas.
Colors are stored as numbers representing red, green, blue, and alpha (RGBA) values. pixels is a one-dimensional array for performance reasons.
Each pixel occupies four elements in the pixels array, one for each RGBA value. For example, the pixel at coordinates (0, 0) stores its RGBA values at pixels[0], pixels[1], pixels[2], and pixels[3], respectively. The next pixel at coordinates (1, 0) stores its RGBA values at pixels[4], pixels[5], pixels[6], and pixels[7]. And so on. The pixels array for a 100×100 canvas has 100 × 100 × 4 = 40,000 elements.
Some displays use several smaller pixels to set the color at a single point. The pixelDensity() function returns the pixel density of the canvas. High density displays often have a pixelDensity() of 2. On such a display, the pixels array for a 100×100 canvas has 200 × 200 × 4 = 160,000 elements.
Accessing the RGBA values for a point on the canvas requires a little math as shown below. The loadPixels() function must be called before accessing the pixels array. The updatePixels() function must be called after any changes are made.