function tintimage(img, red, green, blue){
    ctx.drawImage(img, 0, 0);

    var data = ctx.getImageData(0, 0, canvas.width, canvas.height);

    for (var i = 0, length = data.data.length; i < length; i++) {
	if((red != 0) && (i % 4 == 0)){
		data.data[i] = Math.max(255, data.data[i]) * red;
	}
	if((green != 0) && (i % 4 == 1)){
		data.data[i] = Math.max(255, data.data[i]) * green;
	}
	if((blue != 0) && (i % 4 == 2)){
		data.data[i] = Math.max(255, data.data[i]) * blue;
	}
    }

    ctx.putImageData(data, 0, 0);
}

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image;

img.src = 'img.jpg';

img.addEventListener('load', function() {
	tintimage(img, 0.7, 0, 0.5);
});

<a href="javascript:tintimage(img, 1, 0, 0)">Tint red</a>
<a href="javascript:tintimage(img, 0, 1, 0)">Tint green</a>
<a href="javascript:tintimage(img, 0, 0, 1)">Tint blue</a>
<a href="javascript:tintimage(img, 0, 1, 1)">Tint cyan</a>
<a href="javascript:tintimage(img, 1, 0, 1)">Tint magenta</a>
<a href="javascript:tintimage(img, 1, 1, 0)">Tint yellow</a>