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:

enter image description here

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

enter image description here

How can I do this kind of thing?

Mike 'Pomax' Kamermans · Answer 1 · 2013-04-09T20:50:32.640

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.

edited Apr 09 '13 at 20:50

answered Apr 09 '13 at 20:21

Mike 'Pomax' Kamermans

49,297
16
112
153

score 0 · Answer 2 · answered Apr 09 '13 at 20:55

0

Beside all the mathematical stuff, you could simply use clipping:

canvas.save();
canvas.clipRect(mYourTargetRect);
// draw your arc/circle/object/oval/whatever here
canvas.restore();

answered Apr 09 '13 at 20:55

WarrenFaith

57,492
25
134
150

score 0 · Accepted Answer · answered Apr 11 '13 at 11:46

0

I've got an simplest way to do it. I just draw, in my Web application, an ellipse using Bezier cuvers. Then, I get the centerX, centerY, width and height of the ellipse and pass them to my android application.

In my Android app, I can draw the ellipse drawn in Web using the drawOval method. With this, I can draw Arcs of the ellipse, using drawArcs method, which receives an Oval as parameter.

answered Apr 11 '13 at 11:46

Felipe Mosso

3,907
11
38
61

1

might be worth editing your post to point out which API is available for you on Android that is not available on the web (canvas2d has no elliptical drawArc atm, for instance, only circular) – Mike 'Pomax' Kamermans Apr 19 '13 at 11:47

score 0 · Answer 4 · answered Jun 01 '16 at 07:52

Chrome supports CanvasRenderingContext2D.prototype.ellipse method to draw ellipse or elliptic arc. But other browsers doesn't support ellipse method.

You can use a canvas-5-polyfill to provide the ellipse method.

Or just write some js code:

if (CanvasRenderingContext2D.prototype.ellipse == undefined) {
  CanvasRenderingContext2D.prototype.ellipse = function(x, y, radiusX, radiusY, rotation, startAngle, endAngle, antiClockwise) {
    this.save();
    this.translate(x, y);
    this.rotate(rotation);
    this.scale(radiusX, radiusY);
    this.arc(0, 0, 1, startAngle, endAngle, antiClockwise);
    this.restore();
  }
}

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

4 Answers4