tmcw/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel='stylesheet' type='text/css' href='' />
        <meta http-equiv='content-type' content='text/html; charset=utf-8' />
    </head>
    <body>
      <canvas id='c'></canvas>
        <script src='index.js'></script>
        <script>
        var c = document.getElementById('c');
        c.width = c.height = 500;
        var ctx = c.getContext('2d');
        for (var i = 0; i < 100; i++) {
            ctx.globalAlpha = i / 300;
            ctx.fillRect(i, i * 2, 100, 100);
        }
        colorizeAlpha(c, [[255, 0, 0], [255, 255, 0], [0, 255, 0], [0, 255, 255], [255, 0, 0], [255, 0, 255]]);
        </script>
    </body>
</html>

## index.js
function colorizeAlpha(canvas, gradient) {

  function lerp(a, b, t) {
        return a + (b - a) * t;
    }

	function lerpRgb(a, b, t) {
        return [
            lerp(a[0], b[0], t),
            lerp(a[1], b[1], t),
            lerp(a[2], b[2], t)];
    }

	function getGradientPoint(gradient, pt) {
        // red -> green -> blue
        // 0 -> 50 -> 100
        var splits = 1 / (gradient.length - 1),
            through = pt / splits,
            from = Math.floor(through),
            to = Math.ceil(through),
            remainder = through - from;
        return lerpRgb(gradient[from], gradient[to], remainder);
	}

	var ctx = canvas.getContext('2d'),
		data = ctx.getImageData(0, 0, canvas.width, canvas.height);

	for (var i = 0, l = data.data.length; i < l; i += 4) {
		var alpha = data.data[i + 3] / 255;
        var color = getGradientPoint(gradient, alpha);
        data.data[i + 0] = color[0];
        data.data[i + 1] = color[1];
        data.data[i + 2] = color[2];
	}

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

if (typeof module !== 'undefined') module.exports = colorizeAlpha;
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<link rel='stylesheet' type='text/css' href='' />
	<meta http-equiv='content-type' content='text/html; charset=utf-8' />
	</head>
	<body>
	<canvas id='c'></canvas>
	<script src='index.js'></script>
	<script>
	var c = document.getElementById('c');
	c.width = c.height = 500;
	var ctx = c.getContext('2d');
	for (var i = 0; i < 100; i++) {
	ctx.globalAlpha = i / 300;
	ctx.fillRect(i, i * 2, 100, 100);
	}
	colorizeAlpha(c, [[255, 0, 0], [255, 255, 0], [0, 255, 0], [0, 255, 255], [255, 0, 0], [255, 0, 255]]);
	</script>
	</body>
	</html>
	function colorizeAlpha(canvas, gradient) {

	function lerp(a, b, t) {
	return a + (b - a) * t;
	}

	function lerpRgb(a, b, t) {
	return [
	lerp(a[0], b[0], t),
	lerp(a[1], b[1], t),
	lerp(a[2], b[2], t)];
	}

	function getGradientPoint(gradient, pt) {
	// red -> green -> blue
	// 0 -> 50 -> 100
	var splits = 1 / (gradient.length - 1),
	through = pt / splits,
	from = Math.floor(through),
	to = Math.ceil(through),
	remainder = through - from;
	return lerpRgb(gradient[from], gradient[to], remainder);
	}

	var ctx = canvas.getContext('2d'),
	data = ctx.getImageData(0, 0, canvas.width, canvas.height);

	for (var i = 0, l = data.data.length; i < l; i += 4) {
	var alpha = data.data[i + 3] / 255;
	var color = getGradientPoint(gradient, alpha);
	data.data[i + 0] = color[0];
	data.data[i + 1] = color[1];
	data.data[i + 2] = color[2];
	}

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

	if (typeof module !== 'undefined') module.exports = colorizeAlpha;