Edit in JSFiddle

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 = "rgba(80,80,0,0.5)";
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 = "rgba(24,128,128,0.5)";
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);

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

#subsprites {
    background: url(http://dl.dropbox.com/u/2645586/gco/checker.png);
    overflow: auto;
}
#subsprites img {
    display: block; float: left;
}
#output {
    background: url(http://droneage.com/img/battle/bg/starfield-navy.jpg);
    clear: left; overflow: auto;
}
#output canvas {
    float: left;
}