Метод getImageData() позволяет извлечь из canvas какую-либо часть изображеня.
getImageData(sx, sy, sw, sh);

Все извлеченные данные определяются объектом.В нашем примере выглядит так:
var imagData = context.getImageData(0,0, img.width, img.height); Все данные об изображении в объекте хранятся в массиве data.

Ваш браузер не поддерживает Canvas

Метод putImageData() устанавливает на canvas новые данные:
putImageData(imageData, dx, dy)
Ключевым участком кода здесь является цикл, в котором и происходит преобразование изображения в серое