Home/ Questions/Q 4266528
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T06:46:21+00:00

I am building a JavaScript module to add convenience functions to the HTML5 canvas

  • 0

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:

  • Is there any difference in margin for error when approximating a circle? An ellipse?
  • Is there any reason to have both implementations? (performance, accuracy, etc)
  • Am I missing any other methods for drawing ellipses?

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0