title: How can I draw parts of an ellipse drawn with cubic bezier curves?
body: <p>I'm drawing an ellipse in HTML5 Canvas using this function (<a href="https://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas">How to draw an oval in html5 canvas?</a>):</p>
  
  <pre><code>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();
  }
  </code></pre>
  
  <p>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. </p>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/rH9Hx.png" alt="enter image description here"></p>
  
  <p>I'd like to be able to draw these images:</p>
  
  <p><img src="https://i.stack.imgur.com/sBLc6.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/ueIHD.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/GNofS.png" alt="enter image description here"></p>
  
  <p>How can I do this kind of thing? </p>