El problema es: quiero hacer agujeros transparentes en una forma, así que estoy usando un modo compuesto: destino fuera, que permite eliminar una parte de la forma con una segunda forma.

Eso está bien en una sola forma.

Pero cuando se superponen múltiples formas "perforadas", no hay efecto de transparencia. Entiendo que eso se debe a que esta es la forma en que funcionan globalComposite y js canvas ... Pero, ¿hay alguna solución? Probé clip() y varias opciones compuestas, no encontré.

Aquí está el resultado esperado: https://i.stack.imgur.com/leVfB.png

y aquí hay un JSFiddle de trabajo simplificado: https://jsfiddle.net/7y5utsz0/

 // Drawing the shape ctx.save(); ctx.beginPath(); ctx.rect(this.x, this.y, this.w, this.h); ctx.closePath(); ctx.fillStyle = '#'+this.color; ctx.fill(this.path); ctx.restore(); // "Drilling" the shape with a circle ctx.save(); ctx.globalCompositeOperation = 'destination-out'; ctx.beginPath(); ctx.arc(this.x + 30, this.y + 30, 20, 0, Math.PI * 2, false); ctx.fillStyle = '#ffffff'; ctx.fill(); ctx.closePath(); ctx.restore();

Gracias por cualquier tipo de soluciones!