find the color of the third pixel in a image in javascript

index.tsx
// Assuming you have an image element with id "myImage"
const img = document.getElementById("myImage");

// Create a canvas element and draw the image onto it
const canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);

// Get the pixel data of the canvas
const pixelData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;

// Find the index of the third pixel (pixels are stored as rgba values, so each pixel occupies four consecutive indices)
const pixelIndex = 2 * 4;

// Extract the color values from the pixel data
const red = pixelData[pixelIndex];
const green = pixelData[pixelIndex + 1];
const blue = pixelData[pixelIndex + 2];
const alpha = pixelData[pixelIndex + 3];

// Construct the color string in hex format
const color = "#" + ((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).slice(1);

// Print the color
console.log(color);
968 chars
28 lines