title: Circle drawing with SVG's arc path
body: <p>Short question: using SVG path, we can draw 99.99% of a circle and it shows up, but when it is 99.99999999% of a circle, then the circle won't show up. How can it be fixed?</p>
  <p>The following SVG path can draw 99.99% of a circle:   (try it below and see if you see 4 arcs or only 2 arcs, but note that if it is IE, it is rendered in VML, not SVG, but have the similar issue)</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var paper = Raphael(0, 0, 300, 800);
  
  // Note that there are supposed to be 4 arcs drawn, but you may see only 1, 2, or 3 arcs depending on which browser you use
  
  
  paper.path("M 100 100 a 50 50 0 1 0 35 85").attr({stroke: "#080", opacity: 1, "stroke-width" : 6})  // this is about 62.5% of a circle, and it shows on most any browsers
      
  paper.path("M 100 210 a 50 50 0 1 0 0.0001 0").attr({stroke: "#080", opacity: 1, "stroke-width" : 6})    // this one won't show anything if it is IE 8's VML, but will show if it is Chrome or Firefox's SVG.  On IE 8, it needs to be 0.01 to show
      
  paper.path("M 100 320 a 50 50 0 1 0 0.0000001 0").attr({stroke: "#080", opacity: 1, "stroke-width" : 6})   // this one won't draw anything at all, unless you change the 0.0000001 to 0.0001 on Chrome or Firefox... Safari will show it though...
      
  paper.path("M 100 430 a 50 50 0 1 0 0 0").attr({stroke: "#080", opacity: 1, "stroke-width" : 6})   // this is 100% of a circle...  even Safari won't show it</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <pre><code>M 100 100 a 50 50 0 1 0 0.00001 0
  </code></pre>
  <p>But when it is 99.99999999% of a circle, then nothing will show at all?</p>
  <pre><code>M 100 100 a 50 50 0 1 0 0.00000001 0    
  </code></pre>
  <p>And that's the same with 100% of a circle (it is still an arc, isn't it, just a very complete arc)</p>
  <pre><code>M 100 100 a 50 50 0 1 0 0 0 
  </code></pre>
  <p>How can that be fixed?  The reason is I use a function to draw a percentage of an arc, and if I need to &quot;special case&quot; a 99.9999% or 100% arc to use the circle function, that'd be kind of silly.</p>
  <p>Again, a test case is above
  (and if it is VML on IE 8, even the second circle won't show... you have to change it to 0.01)</p>
  <hr />
  <p><strong>Update:</strong></p>
  <p>This is because I am rendering an arc for a score in our system, so 3.3 points get 1/3 of a circle.  0.5 gets half a circle, and 9.9 points get 99% of a circle.  But what if there are scores that are 9.99 in our system?  Do I have to check whether it is close to 99.999% of a circle, and use an <code>arc</code> function or a <code>circle</code> function accordingly?  Then what about a score of 9.9987?  Which one to use?  It is ridiculous to need to know what kind of scores will map to a &quot;too complete circle&quot; and switch to a circle function, and when it is &quot;a certain 99.9%&quot; of a circle or a 9.9987 score, then use the arc function.</p>