HTML5 холст клип Javascript проблема с Chrome

Question

Я играл вокруг с несколькими стриженых форм на холсте, как это:

Но (только в Chrome), если увеличить ширину или высоту этого холста элемент с четным 1px, он не отображает все фигуры.

Любые идеи? Посмотрите на jsfiddle:

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

код является довольно прямо вперед:

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(); 
} 

- ОБНОВЛЕНИЕ -

Оказывается, что проблема сделать с ускорением 2D холста. Если я отключу «Ускоренное 2D-холст» в хром: // флаги, которые его исправляют.

Это, безусловно, НЕ РЕШЕНИЕ!

Должно быть, проблема с графикой ..? (да, у меня есть современные драйверы, хром и т. д.)

Answer 1

У меня такая же проблема на Win10, chrome 50.0.2661.75 m. Проблема началась, когда я обновился с 49 и не воспроизводится на всех компьютерах с теми же конфигурациями конфигурации ОС и Chrome, поэтому, вероятно, это связано с графическим оборудованием, у меня есть AMD Radeon HD6570. Но на последнем канареечном хроме 52.0.2713.0 проблема не воспроизводима, поэтому я могу вывести, что проблема с аппаратной обработкой, вызванная версией chrome 50. (Я не могу комментировать вопрос, поэтому я написал здесь дополнительную информацию, которая может быть полезна)