I never have time, so this will be quick.
Let’s say we want to find a pixel index amoung all that image data canvas returns with:
The formula is simple:
Basically, you need to draw this one out. Let’s say we have a 3×3 image. Each pixel would have it’s own zero based index. The width would be three. Each row would stretch from 0 – 2 and each column would stretch from 0 – 2.
Now let’s say we want to select the 7th pixel. We know the formula is:
index => (y * w + x)
So we can calculate the index by selecting Row 2 and Column 1. Just like battleship.
The only confusing part is why we should multiply by 4 at the end! It’s simple really, there are 4 values for every pixel (r,g,b,a).
To loop through and get the index for every pixel, might look something like: