drawColoredImage.js

var context = canvas.getContext("2d");
context.drawColoredImage = function(img, sx, sy, sw, sh, dx, dy, dw, dh, r, g, b) {
				var buffer: Dynamic = Browser.document.createElement('canvas');
				buffer.width = dw;
				buffer.height = dh;
				var bx = buffer.getContext('2d');
				
				// fill offscreen buffer with the tint color
				bx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
				bx.fillRect(0, 0, dw, dh);
				
				// destination atop makes a result with an alpha channel identical to fg, but with all pixels retaining their original color *as far as I can tell*
				bx.globalCompositeOperation = "destination-atop";
				
				bx.drawImage(img, sx, sy, sw, sh, 0., 0., dw, dh);
				
				//then set the global alpha to the amound that you want to tint it, and draw the buffer directly on top of it.
				var oAlpha = context.globalAlpha;
				context.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
				context.globalAlpha = 0.5;
				context.drawImage(buffer, 0., 0., dw, dh, dx, dy, dw, dh);
				context.globalAlpha = oAlpha;
			};

Based upon : http://stackoverflow.com/a/4231508