Geek asks and answers

Draw a stretched arc on HTML5 canvas

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

How to draw an arc similar to the one below (where the arc is drawn / radius is changed)? enter image description here

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

context.moveTo(centerX, centerY);
context.arc(centerX, centerY, radius, startingAngle, endingAngle, false);       
context.closePath();
+3
source share
2 answers

You can use conversions. Like in this living 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() ;
​
+2
source

This is what you want: scale()in<canvas>

ctx.save();
ctx.scale(1,0.75);
//Do your arc here
ctx.restore();

//Viola!

DEMO: https://developer.mozilla.org/samples/canvas-tutorial/5_4_canvas_scale.html

+2
source

More articles:


All Articles