title: How to convert an Arc into a Line with HTML5 Canvas?
body: <p>I would like to animate a circle into a line with the radius equaling the width, and I am wondering how I can do this with an Arc? Or perhaps there is a better way?</p>
  
  <p>From
  <a href="https://i.stack.imgur.com/Syf3o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Syf3o.png" alt="enter image description here"></a></p>
  
  <p>To <a href="https://i.stack.imgur.com/6wfUN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6wfUN.png" alt="enter image description here"></a></p>
  
  <p>Here's my arc:</p>
  
  <pre><code>function drawStar(x,y,size,scale,opacity,ctx){
    ctx.save();
    ctx.beginPath();
    ctx.arc(x,y,size+scale,0,size+scale * Math.PI,false);
    ctx.globalAlpha = opacity
    ctx.closePath();
    setFillStyle('rgb(255,237,219)',ctx);
    ctx.fill()
    ctx.restore();
  }
  </code></pre>
  
  <p>I tried using ctx.scale(n,1), however it does not keep the same radius(width) and it scales the collection of arcs as a whole (zoom in effect).</p>