Решил проблему следующим образом:
var imgCanvas = document.createElement("canvas");
var ctx = imgCanvas.getContext("2d");
var imageObj.src = 'img/someImage.png';
imageObj.onload = function(){
ctx.draw(imageObj,0,0);
var imageData = ctx.getImageData(0,0,30,30);
var data = imageData.data;
var countX=0;
var countY=0;
for(var i = 0, n = data.length; i < n; i += 4) {
var red = data[i] + 50;
var green = data[i+1] - 50;
var blue = data[i+2] - 50;
var alpha = (data[i+3]/255).toFixed(2);
ctx.fillStyle = 'rgba('+red+','+green+','+blue+','+alpha+')';
ctx.fillRect(countX,countY,1,1);
countX++;
if(countX>=imageHeight){
countX=0;
countY++;
if(countY>=imageWidth){
countY=0;
}
}
}
}
Нарисовал квадрат в каждом пиксели с помощью fillRect(). А параметры rgba взял из исходного изображения с помощью метода getImageData(). В этом примере я добавляю немного красного и убираю синего и зеленого. Alpha не меняю, но fillStyle() принимает значение alpha от 0 до 1, поэтому делится на 255. Потом изображение в canvas доступно для использования, например, с помощью toDataUrl()
var imageUrl=imgCanvas.toDataURL();
var pushImg = new Image();
pushImg.src = imageUrl;
pushImg.onload = function(){
//Действия с новым изображением pushImg.
}
