Can somebody please help me with a geometric transformation problem?

Question

I need to draw a circular arc between two given points. I also have the arc's radius. I understand that this can be done using standard canvas APIs but I need to handle the case of elliptical arcs too. This code is a generalized solution. The only problem right now is that it doesn't work!

The mathematical concept behind this code is at https://math.stackexchange.com/questions/53093/how-to-find-the-center-of-an-ellipse.

My JS code is implementation of that. My JS code can be found at http://jsfiddle.net/BkEnz/2/. Ideally both the circles there should pass through the two little pink dots.

I hope somebody can point me towards the right direction. I have been trying to solve this for past few days now!

Answer 1

Fixed this issue. The corrected working code is at http://jsfiddle.net/ZxRBT.

Notice the line

var t = translate(-R1R2x, -R1R2y, IDENTITY_TRANSFORM());

In my previous version of the code this line was

var t = translate(-R1R2x, -R1R2y, sr);

So when I was calculating the value of C1 and C2, using the following code

C1 = compose(vut, [[R1x],[R1y],[1]]);
C2 = compose(vut, [[R2x],[R2y],[1]]);

I was also applying the sr composition over R1x,R1y and R2x,R2y, but these points were already in sr coordinate.

This was a grave mistake which I overlooked for really a long time.