Acessando dados de pixel no HTML Canvas

É possível recuperar a cor de um pixel específico dentro de um objeto HTML Canvas? Sim, você pode acessar e manipular dados de pixel no HTML Canvas usando vários métodos fornecidos pela API do Canvas.

Obtendo a cor do pixel

Para recuperar a cor de um pixel em um local específico dentro de uma tela, você pode usar o método getImageData(). Este método retorna um objeto ImageData que representa uma parte da tela. O objeto ImageData contém uma matriz de dados de pixel que você pode acessar usando a propriedade .data.

Manipulação de pixel

Depois de obter os dados de pixel, você pode manipular conforme desejado. Por exemplo, você pode criar uma imagem em tons de cinza convertendo cada pixel em um tom de cinza:

// Get the CanvasPixelArray from the given coordinates and dimensions.
var imgd = context.getImageData(x, y, width, height);
var pix = imgd.data;

// Loop over each pixel and convert it to grayscale.
for (var i = 0, n = pix.length; i < n; i  = 4) {
  var gray = (pix[i]   pix[i 1]   pix[i 2]) / 3;
  pix[i  ] = gray;
  pix[i 1] = gray;
  pix[i 2] = gray;
}

// Draw the ImageData at the given (x,y) coordinates.
context.putImageData(imgd, x, y);

Aproveitando os métodos getImageData() e putImageData(), você pode executar várias tarefas de manipulação de pixels, como filtragem de imagens, ajustes de cores e criação de efeitos em HTML Tela.