javascript - Loop through imagedata in a HTM5 canvas vertically -

i trying loop canvas vertically. mean, looping through first column, the 2nd, etc.

my first goal colorize first half of width. code acting weird , problem is... not know why!

loopvertical = function (data, canvas){     (var x = 0; x < canvas.width*2; x+=4) {         (var y = 0; y < canvas.height; y++) {             data[x+y*canvas.width*4] = 255;                  }     }     return data; } 

the result: red stripes on image. , that's not want.

after need divide image in smaller images if have vertical line of transparent pixels, not topic of question :)

i don't know html5 canvas , image data, according this tutorial, guess outer loop wrong. apparently, need take care of operator precedence when calculating index of data. maybe :

loopvertical = function (data, canvas){     // first half of width     (var x = 0; x < canvas.width / 2; x++) {         (var y = 0; y < canvas.height; y++) {             data[(x+y*canvas.width)*4] = 255;               }     }     return data; }