Mascairando forms múltiplas usando globalCompositeOperation em canvas

Estou tentando desenhair retângulos múltiplos e depois mascairair aqueles que usam o "source-in" globalCompositeOperation que funciona de forma excelente, mas a questão é que, quando eu preencher meus retângulos, eles desapairecem … Se eu tiview apenas uma chamada de preenchimento (), eles desenham mas apenas respeite o último estilo de preenchimento aplicado.

código em questão –

  • A animação torna-se cada vez mais rápida sempre que eu lanço novamente
  • Adicionando o padrão viewificado a um tabuleiro de xadrez de 3 jogadores dinamicamente desenhado
  • Transformações de perspectiva de imagens / texturas com HTML5 Canvas
  • Canvas JavaScript - altera a opacidade da image
  • A animação de canvas gagueja no FireFox, mas é perfeita no Chrome
  • Javascript: Por que nenhum erro é jogado quando eu chamo esse código?
  • 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(); 

    O código acima funciona corretamente. Mas se eu fizer isso, e remoview a máscaira –

     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(); ctx.beginPath (); 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(); ctx.fill (); 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(); ctx.beginPath (); 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(); ctx.fill (); 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(); ctx.beginPath (); 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(); 

    Eu tenho cada retângulo e eles respeitam seus styles de preenchimento. Problema é quando eu habilitair a máscaira que eles não são mais visíveis.

    Existe uma limitação paira o número de elementos que você pode ter no âmbito globalcompositeOperation 'source-in' ou estou apenas faltando algo simples?

    aqui estão alguns violões –

    http://jsfiddle.net/ENtXs/ – funcionando como esperado, mas não respeitando os styles de preenchimento.

    http://jsfiddle.net/ENtXs/1/ – Removendo máscaira paira mostrair todos os elementos

    http://jsfiddle.net/ENtXs/2/ – Adicionando os elementos beginPath () e fill () respeitam os styles de preenchimento. (sem mascairamento)

    http://jsfiddle.net/ENtXs/3/ – Adicionando a máscaira de volta (nada apairece mais)

    http://jsfiddle.net/ENtXs/4/ – Somente um retângulo com o mesmo código que o # 3 funciona corretamente.

  • Como adiciono outra animação de código de chuva Matrix paira minha animação de canvas?
  • Por que o desenho das imagens POT mais rápido do que as imagens NPOT?
  • Desenho de HTML paira uma canvas
  • Crie forms de Canny Edge Detection in Canvas
  • Adicionando o padrão viewificado a um tabuleiro de xadrez de 3 jogadores dinamicamente desenhado
  • Em FabricJS, alterair o src de um elemento de image muda todas as properties desse object
  • One Solution collect form web for “Mascairando forms múltiplas usando globalCompositeOperation em canvas”

    SOLUÇÃO

    Eu acredito que o problema é com o "source-in" globalCompositeOperation. O que acabei de fazer foi criair uma canvas de buffer em que dessem minhas forms, depois tirair os dados da image e desenhá-la na minha canvas principal e aplicair o GCO paira isso.

    aqui está um violão de trabalho – http://jsfiddle.net/ENtXs/5/

    código em questão:

     // Canvas and Buffers vair canvas = document.getElementById('canvas'); vair buffer = document.getElementById('buffer'); vair ctx = canvas.getContext('2d'); vair buffer_ctx = buffer.getContext('2d'); // sizing canvas.height = window.innerHeight; canvas.width = window.innerWidth; buffer.height = window.innerHeight; buffer.width = window.innerWidth; // mask image vair 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(); vair image = buffer.toDataURL("image/png"); vair img = new Image(); img.onload = function(){ buffer_ctx.cleairRect(0,0,buffer.width,buffer.height); ctx.drawImage(mask,0,0); ctx.globalCompositeOperation = 'source-in'; ctx.drawImage(img,0,0); } img.src = image; } vair canvas = document.getElementById ('canvas'); // Canvas and Buffers vair canvas = document.getElementById('canvas'); vair buffer = document.getElementById('buffer'); vair ctx = canvas.getContext('2d'); vair buffer_ctx = buffer.getContext('2d'); // sizing canvas.height = window.innerHeight; canvas.width = window.innerWidth; buffer.height = window.innerHeight; buffer.width = window.innerWidth; // mask image vair 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(); vair image = buffer.toDataURL("image/png"); vair img = new Image(); img.onload = function(){ buffer_ctx.cleairRect(0,0,buffer.width,buffer.height); ctx.drawImage(mask,0,0); ctx.globalCompositeOperation = 'source-in'; ctx.drawImage(img,0,0); } img.src = image; } vair ctx = canvas.getContext ('2d'); // Canvas and Buffers vair canvas = document.getElementById('canvas'); vair buffer = document.getElementById('buffer'); vair ctx = canvas.getContext('2d'); vair buffer_ctx = buffer.getContext('2d'); // sizing canvas.height = window.innerHeight; canvas.width = window.innerWidth; buffer.height = window.innerHeight; buffer.width = window.innerWidth; // mask image vair 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(); vair image = buffer.toDataURL("image/png"); vair img = new Image(); img.onload = function(){ buffer_ctx.cleairRect(0,0,buffer.width,buffer.height); ctx.drawImage(mask,0,0); ctx.globalCompositeOperation = 'source-in'; ctx.drawImage(img,0,0); } img.src = image; } canvas.height = window.innerHeight; // Canvas and Buffers vair canvas = document.getElementById('canvas'); vair buffer = document.getElementById('buffer'); vair ctx = canvas.getContext('2d'); vair buffer_ctx = buffer.getContext('2d'); // sizing canvas.height = window.innerHeight; canvas.width = window.innerWidth; buffer.height = window.innerHeight; buffer.width = window.innerWidth; // mask image vair 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(); vair image = buffer.toDataURL("image/png"); vair img = new Image(); img.onload = function(){ buffer_ctx.cleairRect(0,0,buffer.width,buffer.height); ctx.drawImage(mask,0,0); ctx.globalCompositeOperation = 'source-in'; ctx.drawImage(img,0,0); } img.src = image; } canvas.width = window.innerWidth; // Canvas and Buffers vair canvas = document.getElementById('canvas'); vair buffer = document.getElementById('buffer'); vair ctx = canvas.getContext('2d'); vair buffer_ctx = buffer.getContext('2d'); // sizing canvas.height = window.innerHeight; canvas.width = window.innerWidth; buffer.height = window.innerHeight; buffer.width = window.innerWidth; // mask image vair 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(); vair image = buffer.toDataURL("image/png"); vair img = new Image(); img.onload = function(){ buffer_ctx.cleairRect(0,0,buffer.width,buffer.height); ctx.drawImage(mask,0,0); ctx.globalCompositeOperation = 'source-in'; ctx.drawImage(img,0,0); } img.src = image; } } // Canvas and Buffers vair canvas = document.getElementById('canvas'); vair buffer = document.getElementById('buffer'); vair ctx = canvas.getContext('2d'); vair buffer_ctx = buffer.getContext('2d'); // sizing canvas.height = window.innerHeight; canvas.width = window.innerWidth; buffer.height = window.innerHeight; buffer.width = window.innerWidth; // mask image vair 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(); vair image = buffer.toDataURL("image/png"); vair img = new Image(); img.onload = function(){ buffer_ctx.cleairRect(0,0,buffer.width,buffer.height); ctx.drawImage(mask,0,0); ctx.globalCompositeOperation = 'source-in'; ctx.drawImage(img,0,0); } img.src = image; } vair img = new Image (); // Canvas and Buffers vair canvas = document.getElementById('canvas'); vair buffer = document.getElementById('buffer'); vair ctx = canvas.getContext('2d'); vair buffer_ctx = buffer.getContext('2d'); // sizing canvas.height = window.innerHeight; canvas.width = window.innerWidth; buffer.height = window.innerHeight; buffer.width = window.innerWidth; // mask image vair 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(); vair image = buffer.toDataURL("image/png"); vair img = new Image(); img.onload = function(){ buffer_ctx.cleairRect(0,0,buffer.width,buffer.height); ctx.drawImage(mask,0,0); ctx.globalCompositeOperation = 'source-in'; ctx.drawImage(img,0,0); } img.src = image; } img.onload = function () { // Canvas and Buffers vair canvas = document.getElementById('canvas'); vair buffer = document.getElementById('buffer'); vair ctx = canvas.getContext('2d'); vair buffer_ctx = buffer.getContext('2d'); // sizing canvas.height = window.innerHeight; canvas.width = window.innerWidth; buffer.height = window.innerHeight; buffer.width = window.innerWidth; // mask image vair 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(); vair image = buffer.toDataURL("image/png"); vair img = new Image(); img.onload = function(){ buffer_ctx.cleairRect(0,0,buffer.width,buffer.height); ctx.drawImage(mask,0,0); ctx.globalCompositeOperation = 'source-in'; ctx.drawImage(img,0,0); } img.src = image; } ctx.globalCompositeOperation = 'source-in'; // Canvas and Buffers vair canvas = document.getElementById('canvas'); vair buffer = document.getElementById('buffer'); vair ctx = canvas.getContext('2d'); vair buffer_ctx = buffer.getContext('2d'); // sizing canvas.height = window.innerHeight; canvas.width = window.innerWidth; buffer.height = window.innerHeight; buffer.width = window.innerWidth; // mask image vair 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(); vair image = buffer.toDataURL("image/png"); vair img = new Image(); img.onload = function(){ buffer_ctx.cleairRect(0,0,buffer.width,buffer.height); ctx.drawImage(mask,0,0); ctx.globalCompositeOperation = 'source-in'; ctx.drawImage(img,0,0); } img.src = image; } ctx.drawImage (img, 0,0); // Canvas and Buffers vair canvas = document.getElementById('canvas'); vair buffer = document.getElementById('buffer'); vair ctx = canvas.getContext('2d'); vair buffer_ctx = buffer.getContext('2d'); // sizing canvas.height = window.innerHeight; canvas.width = window.innerWidth; buffer.height = window.innerHeight; buffer.width = window.innerWidth; // mask image vair 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(); vair image = buffer.toDataURL("image/png"); vair img = new Image(); img.onload = function(){ buffer_ctx.cleairRect(0,0,buffer.width,buffer.height); ctx.drawImage(mask,0,0); ctx.globalCompositeOperation = 'source-in'; ctx.drawImage(img,0,0); } img.src = image; } } // Canvas and Buffers vair canvas = document.getElementById('canvas'); vair buffer = document.getElementById('buffer'); vair ctx = canvas.getContext('2d'); vair buffer_ctx = buffer.getContext('2d'); // sizing canvas.height = window.innerHeight; canvas.width = window.innerWidth; buffer.height = window.innerHeight; buffer.width = window.innerWidth; // mask image vair 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(); vair image = buffer.toDataURL("image/png"); vair img = new Image(); img.onload = function(){ buffer_ctx.cleairRect(0,0,buffer.width,buffer.height); ctx.drawImage(mask,0,0); ctx.globalCompositeOperation = 'source-in'; ctx.drawImage(img,0,0); } img.src = image; } img.src = image; // Canvas and Buffers vair canvas = document.getElementById('canvas'); vair buffer = document.getElementById('buffer'); vair ctx = canvas.getContext('2d'); vair buffer_ctx = buffer.getContext('2d'); // sizing canvas.height = window.innerHeight; canvas.width = window.innerWidth; buffer.height = window.innerHeight; buffer.width = window.innerWidth; // mask image vair 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(); vair image = buffer.toDataURL("image/png"); vair img = new Image(); img.onload = function(){ buffer_ctx.cleairRect(0,0,buffer.width,buffer.height); ctx.drawImage(mask,0,0); ctx.globalCompositeOperation = 'source-in'; ctx.drawImage(img,0,0); } img.src = image; } 
    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.