title: How do I compensate for the extra pixels added by stroke-linecap="round" in my calculated arc?
body: <p>I'm creating an arc based on sunrise and sunset using the following example of a sunrise at 6:15am</p>
  
  <pre><code>hour * 15 = 90
  minutes  * 0.25 = 3.75
  hour + minutes = 93.75
  </code></pre>
  
  <p>Here is the function I used to calculate the path.</p>
  
  <pre><code>polarToCartesian: function (centerX, centerY, radius, angleInDegrees) {
    var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0
  
    return {
      x: centerX + (radius * Math.cos(angleInRadians)),
      y: centerY + (radius * Math.sin(angleInRadians))
    }
  },
  describeArc: function (x, y, radius, startAngle, endAngle) {
    var start = this.polarToCartesian(x, y, radius, endAngle)
    var end = this.polarToCartesian(x, y, radius, startAngle)
  
    var largeArcFlag = endAngle - startAngle &lt;= 180 ? '0' : '1'
  
    var d = [
      'M', start.x, start.y,
      'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(' ')
    return d
  }
  </code></pre>
  
  <p>And here is the svg snippet</p>
  
  <pre><code>&lt;path id="sun_ring_start" :d="getArcs(27, 93.75, 0)" fill="none" stroke="yellow" stroke-width="3" stroke-linecap="round" /&gt;
  </code></pre>
  
  <p>If I use stroke-linecap="butt" with stroke-width="3" you can see the arc starts at 6:15 on my clock face. When I set the stroke-linecap="round" with stroke-width="3" the arc starts earlier then 6:15 because of the extra pixels added by stroke-linecap="round".</p>
  
  <p>How can I compensate for the extra pixels added by stroke-linecap="round"?</p>