Can I access the row and column of an image pixel with getImagePixelData?

Hello, I'm using getImagePixelData to modify the pixels of a Drawing Canvas. I would like to modify some pixels in some rows and columns but not all. Is there a way to do that somehow?

You should be able to alter a few parts of the returned ImageData and then load it back in to the canvas with loadImagePixelData().

You should be able to alter a few parts of the returned ImageData and then load it back in to the canvas with loadImagePixelData().

Oh yeah I'm already doing that, but I want to keep a puzzle piece in each Canvas (I have 16 pieces). So I need to know exactly when a row of the image ends in the buffer if that's possible, thanx! :D

Each pixel uses 4 bytes in the imageData array (r, g, b, a). So here is how to get pixel data at row:x, column:y

> function getColorAtPixel(imageData, x, y) {
const {width, data} = imageData

return {
r: data[4 * (width * y + x) + 0],
g: data[4 * (width * y + x) + 1],
b: data[4 * (width * y + x) + 2],
a: data[4 * (width * y + x) + 3]
}
}

Thank you so much! :D

Here's is my code but it won't get a rectangular area that I want for some reason:

	function getMainPartCoordinates (i, runtime, maskData, referenceData, pieceData) {

	var mData = maskData.data;
	var pData = pieceData.data;
	var rData = referenceData.data;
	
	var rowsAndColumns = Math.sqrt (runtime.globalVars.NumberOfPieces);
	
	for (var j = i % rowsAndColumns * 117; j < i % rowsAndColumns * 117 + 117; j++){
		for (var k= i % rowsAndColumns * 117; k < i % rowsAndColumns * 117 + 117; k++) {
			if (getColorAtPixel (mData, k, j).a == 0)
				setColorAtPixel (pData, rData, k, j);
			else
				break;
		}
	}
	
	
	piecesDC[i].loadImagePixelData(pieceData);
}