The probleme is : I want to make a transparent holes in a shape, so I'm using a composite mode : destination-out, which allow to remove a part of the shape with a second shape.

That's ok on a single shape.

But when multiple "drilled" shapes are overlaping, there is no transparency effect. I understand that's because this is the way globalComposite and js canvas is working... But, is there a solution ? I tried clip() and various composite options, i didn't find.

Here is the expected result : https://i.stack.imgur.com/leVfB.png

and here is a simplified working JSFiddle : 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();

Thanks for any kind of solutions !