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: