SOLVED
I believe the issue is with globalCompositeOperation 'source-in'. What I wound up doing was creating a buffer canvas which I draw my shapes on, then taking that image data and drawing it into my primary canvas and apply the GCO to that.
here's a working fiddle - http://jsfiddle.net/ENtXs/5/
code in question:
// Canvas and Buffers
var canvas = document.getElementById('canvas');
var buffer = document.getElementById('buffer');
var ctx = canvas.getContext('2d');
var buffer_ctx = buffer.getContext('2d');
// sizing
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
buffer.height = window.innerHeight;
buffer.width = window.innerWidth;
// mask image
var mask = new Image();
mask.onload = function () {
drawBuffer();
}
mask.src = 'http://drewdahlman.com/experiments/masking/highball_mask.png';
function drawBuffer() {
buffer_ctx.beginPath();
buffer_ctx.rect(0, 256, 256, 75);
buffer_ctx.fillStyle = "#c65127";
buffer_ctx.fill();
buffer_ctx.beginPath();
buffer_ctx.rect(0, 226, 256, 25);
buffer_ctx.fillStyle = "#f5f4f0";
buffer_ctx.fill();
buffer_ctx.beginPath();
buffer_ctx.rect(0, 186, 256, 35);
buffer_ctx.fillStyle = "#222";
buffer_ctx.fill();
var image = buffer.toDataURL("image/png");
var img = new Image();
img.onload = function(){
buffer_ctx.clearRect(0,0,buffer.width,buffer.height);
ctx.drawImage(mask,0,0);
ctx.globalCompositeOperation = 'source-in';
ctx.drawImage(img,0,0);
}
img.src = image;
}