Пауло Мадроньеро

Решил проблему следующим образом:

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. 
    }