Drawn with

How we can draw oval?

HTML Canvas 2D Context specification defines CanvasRenderingContext2D.ellipse() function, but on a current moment only Chrome implements it.

That's why I (Artyom Pokatilov) developed custom way to draw oval with cubic curves - here it is:

Algorithm description

Let's watch initial oval with rotation angle = 0:

You can see here:

• Rx and Ry - horizontal and vertical radiuses of oval.
• h - half of distance between points P1 and P2. Equal to Ry.
• w - half of distance between points P1 and P5, equal to distance between P1 and P6. Equal to Rx * 4/3. Not equal to Rx because of Bezier curve behaviour.
• Pc - center oval point.
• P1-P6 - around oval point for Bezier curve formulas.

Looks easy to calculate P1-P6 coordinates in this situation. Problems come with rotation angle:

Here we come with our additional calculations:

We can get rotation angle (α) using wikipedia description like that:

Then we can easy find dx1-2 and dy1-2:

Final step - find points coordinates. Easy to see that we can get P3 from Pc:

Then - P2 from P3:

And P4 from P3:

The same we will have for bottom part:

Oval consists of 2 cubic curves:

1. first one has P6 start point, P1 and P2 control points and P3 as end point.
2. second one has P3 start point, P4 and P5 control points and P6 as end point.

That's all.