Ответ 1
Демонстрация (см. примечание об этом демо ниже): http://jsfiddle.net/m1erickson/2d7ZN/
Вы можете получить массив, содержащий пиксельные данные изображения RGBA, используя context.getImageData
var imageData=context.getImageData(0,0,canvas.width,canvas.height);
var data=imageData.data;
Оттуда вы можете читать (и необязательно менять) цвет каждого пикселя.
Массив rgba выложен следующим образом:
// top-left pixel (x:0,y:0)
data[0] red of pixel#0 (0-255)
data[1] green of pixel#0 (0-255)
data[2] blue of pixel#0 (0-255)
data[3] alpha of pixel#0 (opacity: 0-255)
// next pixel (x:1,y:0)
data[4] red of pixel#1
data[5] green of pixel#1
data[6] blue of pixel#1
data[7] alpha of pixel#1
Вы можете изменить компонент R, G, B или любого пикселя, изменив массив данных
Например, это изменяет верхний левый пиксель на сплошной красный
data[0]=255; // red
data[1]=0; // green
data[2]=0; // blue
data[3]=255; // alpha (opacity)
О прозрачности:
Альфа-компонент каждого пикселя определяет прозрачность пикселей. Если вы хотите изменить только непрозрачные пиксели, вы можете легко игнорировать все полупрозрачные пиксели, например:
// alpha is 0-255
// ignore pixels with alpha < 200 (ignore all pixels that are mostly semi-transparent)
if( data[3]<200 ) { // don't process this pixel }
Наконец, вы можете подтолкнуть измененные пиксели к холсту с помощью .putImageData
context.putImageData(imageData,0,0);
Примечание о демонстрации
Сложно "перекрасить" изображение, используя цветовую схему RGBA по умолчанию для холста.
Итак, эта демоверсия преобразует данные RGB в цветовую схему HSL. Это позволяет изменить "цвет" (оттенок), не затрагивая другие компоненты пикселя (S = насыщенность цвета, L = яркость цвета).
После того, как пиксель будет перекрашен, эти измененные данные HSL преобразуются обратно в RGBA и сохраняются в массиве данных.