Enmascarar forms múltiples usando globalCompositeOperation en canvas

Estoy intentando dibujar múltiples rectangularjs y luego enmascararlos usando globalCompositeOperation 'source-in' que funciona muy bien, pero el problema es que cuando llene mis rectangularjs desaparecen … Si solo tengo una llamada a fill () todos dibujan correctamente pero solo respeta el último estilo de relleno aplicado.

código en cuestión –

ctx.drawImage(self.glass.mask, 256, 375); ctx.globalCompositeOperation = 'source-in'; ctx.rect(256, 635, 256, 75); ctx.fillStyle = "#c65127"; ctx.rect(256, 605, 256, 25); ctx.fillStyle = "#f5f4f0"; ctx.rect(256, 565, 256, 35); ctx.fillStyle = "#c65127"; ctx.fill(); 

El código anterior funciona correctamente. Pero si hago esto, y quito la máscara –

 ctx.beginPath(); ctx.rect(0, 256, 256, 75); ctx.fillStyle = "#c65127"; ctx.fill(); ctx.beginPath(); ctx.rect(0, 226, 256, 25); ctx.fillStyle = "#f5f4f0"; ctx.fill(); ctx.beginPath(); ctx.rect(0, 186, 256, 35); ctx.fillStyle = "#222"; ctx.fill(); 

Tengo cada rectángulo y respetan sus styles de relleno. El problema es cuando habilito la máscara ya no son visibles.

¿Existe una limitación en la cantidad de elementos que puede tener en globalCompositeOperation 'source-in' o simplemente me falta algo simple?

aquí hay algunos violines –

http://jsfiddle.net/ENtXs/ : funciona como se esperaba pero no respeta los styles de relleno.

http://jsfiddle.net/ENtXs/1/ – Eliminación de máscara para mostrar todos los elementos

http://jsfiddle.net/ENtXs/2/ – Agregar los elementos de beginPath () y fill () respeta los styles de relleno. (sin enmascarar)

http://jsfiddle.net/ENtXs/3/ – Añadiendo la máscara de nuevo (nada más aparece)

http://jsfiddle.net/ENtXs/4/ – Solo tener un rectángulo con el mismo código que el # 3 funciona correctamente.

SOLUCIONADO

Creo que el problema es con globalCompositeOperation 'fuente-en'. Lo que terminé haciendo fue crear un canvas de memory intermedia en el que dibujo mis forms, luego tomar esa image de datos y dibujarla en mi canvas primario y aplicar el GCO a eso.

aquí hay un violín funcional – http://jsfiddle.net/ENtXs/5/

código en cuestión:

 // 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; }