position=(x+y*imageData.width)*4;
imageData.data[position] = c%255;
imageData.data[position+1] = c%255;
imageData.data[position+2] = c%255
imageData.data[position+3] = 255;
// spits out a long list of values, with quadruples of red, green, blue and alpha channels
imageData.data[]
// [r, g, b, a, r, g, b, a, r, g, b, a…]
// first two lines of an image
0 1 2 3 4 5
6 7 8 9 10 11
12 13 14 15 16 17
// we can now derive this useful formula from this observation
// to find a specific pixel, this formula has to be used
x + y * width
4 + 12 * 6
= 16
(x + 1 * width) * 4
// we can skip alpha value like so
for (let i = 0, len = input.data.length; i < len; i++) {
// skip canvas's alpha channel
if (i % 4 === 3) {
continue
}
// ...
}
Good resources: