title: Drawing a perfect circle in canvas with large lineWidth in chrome
body: <p>I am drawing a circle (r = 100px and lineWidth of 500 px ) in HTML canvas, using the method .arc of canvas API for a google chrome app.</p>
  
  <p>But because of the large lineWidth the inaccuracies in the circle are enlarged, and it doesn't looks like a circle anymore.</p>
  
  <p>Here is a demo <strike><a href="http://jsbin.com/ufofor/1/edit" rel="nofollow">http://jsbin.com/ufofor/1/edit</a> </strike> 
   <a href="http://jsbin.com/ufofor/30/edit" rel="nofollow">http://jsbin.com/ufofor/30/edit</a></p>
  
  <pre><code>var c = document.getElementById("canvas");
  var g = c.getContext("2d");    
  var r = 100;   
  
  g.lineWidth = 500;    
  g.arc(505, 505, r,0,2*Math.PI, true);
  g.stroke();
  </code></pre>
  
  <p>Is there any way/hack to make a perfect circle , with a large lineWidth in canvas , using .arc method or any other ?</p>
  
  <hr>
  
  <p>EDIT</p>
  
  <p>The demo works fine in firefox, but in chrome you will find irregularities in the generated circle.</p>
  
  <p><a href="http://i.imgur.com/ZzF35M2.png" rel="nofollow">Chrome screenshot of demo</a></p>
  
  <p><a href="http://i.imgur.com/Jm0BBlJ.png" rel="nofollow">Firefox screenshot of demo</a></p>
  
  <p>Thanks @Felix for pointing this out.</p>