Edit in JSFiddle

var rgbPrimary = "rgba(80,80,0,0.5)";
var rgbSecondary = "rgba(24,128,128,0.5)";

var colorizeSprites = function() {
   
    var imgBase = document.getElementById("base");
    var imgPri = document.getElementById("primary");
    var imgSec = document.getElementById("secondary");
    
    var canvasPri = document.getElementById('primary-output');
    
    var ctxPri = canvasPri.getContext('2d');
    ctxPri.drawImage(imgPri,0,0);
    ctxPri.globalCompositeOperation = "source-atop";
    ctxPri.fillStyle = rgbPrimary;
    ctxPri.fillRect(0,0,canvasPri.width,canvasPri.height);
    
    var canvasSec = document.getElementById('secondary-output');
    
    var ctxSec = canvasSec.getContext('2d');
    ctxSec.drawImage(imgSec,0,0);
    ctxSec.globalCompositeOperation = "source-atop";
    ctxSec.fillStyle = rgbSecondary;
    ctxSec.fillRect(0,0,canvasSec.width,canvasSec.height);
    
    var canvasMerged = document.getElementById('merged-output');
    
    var ctxMerged = canvasMerged.getContext('2d');
    ctxMerged.drawImage(imgBase,0,0);
    ctxMerged.drawImage(canvasPri,0,0);
    ctxMerged.drawImage(canvasSec,0,0);
};

$("#color-primary").CanvasColorPicker({
    color: {r:80,g:80,b:0},
    onColorChange: function(rgb) { 
        rgbPrimary = "rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + ",0.5)"; 
        colorizeSprites();
    }
});

$("#color-secondary").CanvasColorPicker({
    color: {r:24,g:128,b:128},
    onColorChange: function(rgb) { 
        rgbSecondary = "rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + ",0.5)"; 
        colorizeSprites();
    }
});

colorizeSprites();

<div id="subsprites">
  <img id="primary" src="http://dl.dropbox.com/u/2645586/gco/cobra-primary.png" />
  <img id="secondary" src="http://dl.dropbox.com/u/2645586/gco/cobra-secondary.png" />
  <img id="base" src="http://dl.dropbox.com/u/2645586/gco/cobra-base.png" />
</div>
<div id="output">
  <canvas id="primary-output" width="120" height="120"></canvas>
  <canvas id="secondary-output" width="120" height="120"></canvas>
  <canvas id="merged-output" width="120" height="120"></canvas>
</div>
<div id="buttons">
  <button id="color-primary">Primary</button>
  <button id="color-secondary">Secondary</button>
</div>

#subsprites {
    background: url(http://dl.dropbox.com/u/2645586/gco/checker.png);
    overflow: auto;
}
#subsprites img {
    display: block; float: left;
}
#buttons { clear: left; }
button {
    background: #aaa; border: 1px solid #000; width: 120px; height: 30px; float: left; margin: 0; padding: 0;
}
#output {
    background: url(http://dl.dropbox.com/u/2645586/gco/starfield-navy.jpg);
    clear: left; overflow: auto;
}
#output canvas {
    float: left;
}