Get X and Y pixel coordinates when iterating over HTML5 canvas getImageData

Question

I am iterating over some image data pulled from a canvas like so:

var imageData = this.context.getImageData(0, 0, this.el.width, this.el.height)         


        

Answer 1

A Simple Arithmetic Sequence:

Divide the linear position by the width. That's your Y-coordinate. Multiply that Y-coordinate by the width, and subtract that value from the linear position. The result is the X coordinate.

Also note, you will have to divide the linear position by 4 since it is RGBA.