HTML5 Trazo del lienzo no suavizado

Question

Solo intento hacer un círculo con un trazo grueso antialiasado en el lienzo.

El círculo se dibuja como se esperaba, pero los bordes del trazo son muy irregulares. Sigo leyendo que Chrome fuerzas anti-aliasing, así que no sé qué hacer ...

violín: http://jsfiddle.net/nipponese/hWsxw/

HTML

<div id="main"> 
    <canvas id="myCanvas" width="400" height="400" style="border: 1px solid #000"></canvas> 
     <div id="counter" style="height: 100px; width: 100px; border: 1px solid #000"> 
    </div> 
</div> 

Los JS + jQuery

<script> 
    function calc(myVal) { 
     var canvas = document.getElementById("myCanvas"); 
     var ctx = canvas.getContext("2d"); 
     var radius = 70; 

     ctx.beginPath(); 
     ctx.arc(140, 140, 20, myVal * Math.PI, 0, true); 
     ctx.lineWidth = 14; 
     ctx.stroke(); 
    }; 
    $(document).ready(function() { 
     var count = 0; 
     var parsedCount; 
     function go(){ 
      if (count <= 200) { 
       parsedCount = count*.01 
       $('#counter').html('<p>' + parsedCount + '</p>'); 
       calc(parsedCount); 
       count++; 
      } 
     } 
     setInterval(go, 10) 
    }); 
</script> 

Answer 1

Mi compañero de trabajo acaba de señalar que necesito usar clearRect para borrar la lienzo después de cada sorteo. Los golpes acababan de dibujarse uno encima del otro.

function calc(myVal) { 
    var canvas = document.getElementById("myCanvas"); 
    var ctx = canvas.getContext("2d"); 
    var radius = 70; 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 

    ctx.beginPath(); 
    ctx.arc(140, 140, 20, myVal * Math.PI, 0, true); 
    ctx.lineWidth = 14; 
    ctx.stroke(); 
};