HTML5-Canvas-Clip javascript Problem mit Chrome

Question

Ich spiele um mit mehreren abgeschnitten Formen auf Leinwand wie folgt aus:

aber (nur in Chrome), wenn Sie die Breite oder Höhe dieser Leinwand erhöhen Element von sogar 1px, es macht nicht alle Formen.

Irgendwelche Ideen? Werfen Sie einen Blick auf die jsfiddle:

https://jsfiddle.net/entozoon/6fqq0567/

Der Code ist ziemlich geradlinig:

for (i=1;i<=5;i++) { 
    ctx.save(); 

    // clipping mask 
    ctx.beginPath(); 
    ctx.arc(50 * i, 50, 20, 0, Math.PI * 2, true); 
    ctx.closePath(); 

    ctx.clip(); 

    // shape to be clipped 
    ctx.beginPath(); 
    ctx.fillStyle = "red"; 
    ctx.arc(50 * i, 70, 20, 0, Math.PI * 2, true); 
    ctx.closePath(); 
    ctx.fill(); 

    ctx.restore(); 
} 

- UPDATE -

Es stellt sich heraus, dass das Problem zu tun ist, mit 2D-Leinwandbeschleunigung. Wenn ich 'Accelerated 2D Canvas' in Chrome deaktivieren: // Flags, die es behebt.

Dies ist definitiv KEINE Lösung!

Muss ein Grafikproblem sein ..? (ja ich habe aktuelle Fahrer, Chrom, etc.)

Answer 1

Ich habe das gleiche Problem auf Win10, Chrom 50.0.2661.75 m. Das Problem begann mit der Aktualisierung von 49 und ist nicht auf allen Computern mit derselben Betriebssystem- und Chrome-Version reproduzierbar. Es hat also wahrscheinlich mit Grafikhardware zu tun, ich habe eine AMD Radeon HD6570. Aber auf dem neuesten Canary Chrome 52.0.2713.0 ist das Problem nicht reproduzierbar, so dass ich daraus schließen kann, dass es sich um ein Problem mit der Hardware-Handhabung der Chrome 50-Version handelt. (Ich kann die Frage nicht kommentieren, also schrieb ich hier einige zusätzliche Informationen, die nützlich sein können)