Chrome arc路徑填充錯誤的解決方法？

Question

編輯：此版本在版本38中修復。

最近的Chrome版本在我維護的應用程序中引入了一個問題。我不確定這是否是那些奇怪的「看起來錯誤但實際上是正確的」問題之一，或者它是一個誠實的上帝錯誤，但它只在最近版本的Chrome中出現（它開始發生在大約一個月前，我不確定究竟是哪個版本引入的）

在使用上下文arc（）方法繪製的某些路徑上使用上下文fill（）方法時，會出現該錯誤。填充的是一個奇怪形狀的多邊形，而不是繪製一個實心圓弧。

這裏是我的意思示範 - 右上角應該是一個充滿圓弧形狀：

var ctx = document.getElementById('cvs').getContext('2d'); 
 

 
// draw stroked arc 
 
ctx.beginPath(); 
 
ctx.arc(75, 75, 50, 0, Math.PI/2); 
 
ctx.lineTo(125, 125); 
 
ctx.closePath(); 
 
ctx.stroke(); 
 

 
// draw filled arc 
 
ctx.beginPath(); 
 
ctx.arc(225, 75, 50, 0, Math.PI/2); 
 
ctx.lineTo(275, 125); 
 
ctx.closePath(); 
 
ctx.fill(); 
 
\t \t \t 
 
// draw stroked triangle 
 
ctx.beginPath(); 
 
ctx.moveTo(125, 225); 
 
ctx.lineTo(75, 275); 
 
ctx.lineTo(125, 275); 
 
ctx.closePath(); 
 
ctx.stroke(); 
 

 
// draw filled triangle 
 
ctx.beginPath(); 
 
ctx.moveTo(275, 225); 
 
ctx.lineTo(225, 275); 
 
ctx.lineTo(275, 275); 
 
ctx.closePath(); 
 
ctx.fill();

<div><canvas id="cvs" width="300" height="300" style="border: solid black 1px"></canvas></div>

我的問題是：是否有針對此問題的解決方法嗎？最好不要我寫我自己的填充弧渲染器。

Answer 1

我看到在OS X上的Chrome 37.0.2062.124此錯誤這可以或可以不進行相關的錯誤描述here，這是假想被固定在Chrome 38.

作爲一種變通方法，旋轉幾度，在填充弧之前立即旋轉它似乎工作。

// draw filled arc 
ctx.beginPath(); 
ctx.arc(225, 75, 50, 0, Math.PI/2); 
ctx.lineTo(275, 125); 
ctx.closePath(); 
ctx.rotate(1*Math.PI/180); // Rotate 1 degree 
ctx.rotate(-1*Math.PI/180); // Reverse rotation 
ctx.fill(); 

這裏有一個小提琴演示解決方法：http://jsfiddle.net/ejacpd1w/1/