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/