Strumień obrysu HTML5 nie wygładzony

Question

Po prostu próbuję utworzyć kółko z grubym, wygładzonym obrysem w obszarze roboczym.

Okrąg zostanie narysowany zgodnie z oczekiwaniami, ale krawędzie obrysu są bardzo nierówne. Ciągle czyta, że ​​Chrome wymusza wygładzanie, więc nie wiem, co robić ...

Fiddle: 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> 

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

Mój współpracownik po prostu zwrócił uwagę, że muszę użyć metody clearRect, aby wyczyścić płótno po każdym losowaniu. Uderzenia właśnie były narysowane jedna na drugiej.

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