Question

I know how to draw a partial circle(arc) on a HTML5 Canvas but how do I draw a stretched arc on a Canvas?

How do I draw an arc like the one below(where the arc is stetched/the radius changes)?

This is how I draw a normal arc, maybe theres a function that can stretch this arc?

context.moveTo(centerX, centerY);
context.arc(centerX, centerY, radius, startingAngle, endingAngle, false);       
context.closePath();

Answer 1

You can use transforms. As in this live example.

context.save() ;
context.translate(150,150) ;
context.scale(2,1) ;
context.translate(-150,-150) ;
context.moveTo(150, 150);
context.arc(150, 150, 50, 0, 3*Math.PI/4, true);       
context.closePath();
context.stroke() ;
context.restore() ;
​