getting y position from canvas is wrong - html

Question

Sometimes the y-coordinates is greater than height of imagedata. can anybody help me to find my mistake!
Width is 320 px, height is 240px.
Here is my code:
function countPixels(context) {
var nAlive = 0,
all = [];
var w = canvas.width;
var p = context.getImageData(0, 0, canvas.width, canvas.height).data;
for (var y = 0, i = 0; y < canvas.height; y++)
for (var x = 0; x < canvas.width; x++, i += 4) {
if (p[i] == 255 || p[i + 1] == 255 || p[i + 2] == 255) //Not black
{
nAlive++;
var xc = i % w;
var yc = parseInt(i / w, 10);
var pos = {};
pos.x = xc;
pos.y = yc;
all.push(pos);
}
}
var percent = ((canvas.width * canvas.height) / 100) * nAlive;
console.log("Count: " + nAlive + ",percent: " + percent + ",all: " + JSON.stringify(all));
// $("#notifies").append("Count: "+nAlive+",percent: "+ percent+",all: "+JSON.stringify(all));
return {
percentage: parseFloat(percent),
positions: all
};
}
Here is the function call:
var tmp = countPixels(ctx2);
ctx2.strokeStyle = "blue";
$.each(tmp.positions, function(i, value) {
// if (ctx2.isPointInPath(value.x, value.y))
$('div').eq(0).append("i: " + i + " " + value.x + ", " + +value.y + '</br>');
ctx2.rect(value.x, value.y, 5, 5);
});
ctx2.stroke();