CODEWITHSUNDEEP
javascripthtmlbezier
beatgammit
beatgammit

Reputation: 20215

Drawing ellipses with quadratic bezier curves and cubic bezier curves

I am building a JavaScript module to add convenience functions to the HTML5 canvas element. I am trying to give as many different implementations as possible to fill out my module. To see my progress, please visit my project page and my examples page.

I have an ellipse drawing method that uses cubic bezier curves. I know that quadratic bezier curves can be converted to cubic bezier curves, but I have some questions:

P.S. This isn't directly related, but are there any other functions that would be nice to have in such a module?

Note: This is not a homework assignment.

EDIT: Here is my code for an ellipse (xDis is radius in x, yDis is radius in y):

function ellipse(x, y, xDis, yDis) {
    var kappa = 0.5522848, // 4 * ((√(2) - 1) / 3)
        ox = xDis * kappa,  // control point offset horizontal
        oy = yDis * kappa,  // control point offset vertical
        xe = x + xDis,      // x-end
        ye = y + yDis;      // y-end

    this.moveTo(x - xDis, y);
    this.bezierCurveTo(x - xDis, y - oy, x - ox, y - yDis, x, y - yDis);
    this.bezierCurveTo(x + ox, y - yDis, xe, y - oy, xe, y);
    this.bezierCurveTo(xe, y + oy, x + ox, ye, x, ye);
    this.bezierCurveTo(x - ox, ye, x - xDis, y + oy, x - xDis, y);
}

Related questions:

Convert a quadratic bezier to a cubic?

https://stackoverflow.com/questions/2688808/drawing-quadratic-bezier-circles-with-a-given-radius-how-to-determine-control-po

Upvotes: 2

Views: 3659

Answers (2)

Markus Jarderot
Markus Jarderot

Reputation: 89171

A cubic Bezier curve has two more degrees of freedom than a quadratic one. It can thus reduce error further. Though the math for choosing the control-points gets more complex the higher the degree of the curve, a cubic curve should be simple enough.

The difference in performance is not much. A few more multiplications and additions.

Although this could be achieved by rotating the plane, it would be nice to be able to specify the axes of the ellipse. A center, and two axes would form the ellipse center + cos(t)*axis1 + sin(t)*axis2.

Another feature of the library could be different kinds of polynomial curves and splines. A B-spline is similar to a Bezier curve, but can continue along multiple control points.

Upvotes: 2

R Hill
R Hill

Reputation: 1804

If it's a vanilla ellipse, wouldn't it be easier to plot the standard parametric form of the ellipse, and put the result through a rotation transform if it has a non-canonical orientation?

Upvotes: 0

Related Questions