How can I draw parts of an ellipse drawn with cubic bezier curves?

Question

I'm drawing an ellipse in HTML5 Canvas using this function (How to draw an oval in html5 canvas?):

function drawEllipse(ctx, x, y, w, h) {
  var kappa = .5522848,
      ox = (w / 2) * kappa, // control point offset horizontal
      oy = (h / 2) * kappa, // control point offset vertical
      xe = x + w,           // x-end
      ye = y + h,           // y-end
      xm = x + w / 2,       // x-middle
      ym = y + h / 2;       // y-middle

  ctx.beginPath();
  ctx.moveTo(x, ym);
  ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
  ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
  ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
  ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
  ctx.closePath();
  ctx.stroke();
}

Then, I'm getting all these values and sending them to my Android app. There, I'm drawing the same ellipse using cubicTo method of Path class. For this, I only use the same parameters of the function above and it worked like a charm.

But now, I have to draw only parts of this ellipse and I haven't found anything on Google which can help me out with this. What I'd like to do is, having this first ellipse:

I'd like to be able to draw these images:

How can I do this kind of thing?

Answer 1

Have a look at http://pomax.github.io/bezierinfo/#circles_cubic - it discusses this problem for circular arcs (control point value as expressed in arc angle is at the bottom of the section), but the only difference between those and ellipses is a rotate + scaling of one of the dimensions. If you understand the circular approximation, you'll be able to get the elliptical approximation too.