The [ImageData object] section contains incorrect code.

[MaxPScript]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

What specific section or headline is this issue about?

The ImageData object

What information was incorrect, unhelpful, or incomplete?

const blueComponent = imageData.data[50 * (imageData.width * 4) + 200 * 4 + 2];
// and
const xCoord = 50;
const yCoord = 100;
const canvasWidth = 1024;

const getColorIndicesForCoord = (x, y, width) => {
  const red = y * (width * 4) + x * 4;
  return [red, red + 1, red + 2, red + 3];
};

const colorIndices = getColorIndicesForCoord(xCoord, yCoord, canvasWidth);

const [redIndex, greenIndex, blueIndex, alphaIndex] = colorIndices;

What did you expect to see?

const blueComponentFixed = imageData.data[(row - 1) * (imageData.width * 4) + (column - 1) * 4 + 2];
// and
const getColorIndicesForCoordFixed = (x, y, width) => {
    const red = (y - 1) * (width * 4) + (x - 1) * 4;
    return [red, red + 1, red + 2, red + 3];
};

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

const { log, dir } = console;
// From 'The ImageData object' section
//
// For example, to read the blue component's value from the pixel at column 200, row 50 in the image,
// you would do the following:
// const blueComponent = imageData.data[50 * (imageData.width * 4) + 200 * 4 + 2];
const ctx_1 = c_1.getContext("2d"); // c_1 is a canvas element
ctx_1.fillStyle = "rgba(0 0 42 / 1)";
const column = 200;
const row = 50;
ctx_1.fillRect(0, 0, column, row);
let imageData = ctx_1.getImageData(0, 0, column, row);
const blueComponent = imageData.data[50 * (imageData.width * 4) + 200 * 4 + 2];
log(`blueComponent: ${blueComponent}`); // undefined
const blueComponentFixed =
	imageData.data[(row - 1) * (imageData.width * 4) + (column - 1) * 4 + 2];
log(`blueComponentFixed: ${blueComponentFixed}`); // 42
//
// If given a set of coordinates (X and Y), you may end up doing something like this:
// const xCoord = 50;
// const yCoord = 100;
// const canvasWidth = 1024;
// const getColorIndicesForCoord = (x, y, width) => {
// 	const red = y * (width * 4) + x * 4;
// 	return [red, red + 1, red + 2, red + 3];
// };
// const colorIndices = getColorIndicesForCoord(xCoord, yCoord, canvasWidth);
// const [redIndex, greenIndex, blueIndex, alphaIndex] = colorIndices;
ctx_1.clearRect(0, 0, c_1.width, c_1.height);
const xCoord = 50;
const yCoord = 100;
const canvasWidth = 1024;
c_1.width = canvasWidth;
ctx_1.fillStyle = "rgba(0 0 42 / 1)";
ctx_1.fillRect(0, 0, xCoord, yCoord);
imageData = ctx_1.getImageData(0, 0, canvasWidth, yCoord);
const getColorIndicesForCoord = (x, y, width) => {
	const red = y * (width * 4) + x * 4;
	return [red, red + 1, red + 2, red + 3];
};
const colorIndices = getColorIndicesForCoord(xCoord, yCoord, canvasWidth);
const [redIndex, greenIndex, blueIndex, alphaIndex] = colorIndices;
log(redIndex, greenIndex, blueIndex, alphaIndex); // 409800 409801 409802 409803
log(`imageData.data length: ${imageData.data.length}`); // 409600
log(
	imageData.data[redIndex], // undefined
	imageData.data[greenIndex], // undefined
	imageData.data[blueIndex], // undefined
	imageData.data[alphaIndex] // undefined
);
//
const getColorIndicesForCoordFixed = (x, y, width) => {
	const red = (y - 1) * (width * 4) + (x - 1) * 4;
	return [red, red + 1, red + 2, red + 3];
};
const colorIndicesFixed = getColorIndicesForCoordFixed(
	xCoord,
	yCoord,
	canvasWidth
);
const [redIndexFixed, greenIndexFixed, blueIndexFixed, alphaIndexFixed] =
	colorIndicesFixed;
log(redIndexFixed, greenIndexFixed, blueIndexFixed, alphaIndexFixed); // 405700 405701 405702 405703
log(`imageData.data length: ${imageData.data.length}`); // 409600
log(
	imageData.data[redIndexFixed], // 0
	imageData.data[greenIndexFixed], // 0
	imageData.data[blueIndexFixed], // 42
	imageData.data[alphaIndexFixed] // 255
);

MDN metadata

Page report details

• Folder: en-us/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md
• Last commit: f3c4fc4
• Document last modified: 2024-10-08T03:44:01.000Z