I am trying to build a near-perfect circle with quadratic curves in canvas. I have this function for setting up points around a circle and connecting them with quadratic curves:
function calcPointsCircle(cx, cy, radius, dashLength) {
var n = radius / dashLength,
alpha = Math.PI * 2 / n,
i = -1;
while (i < n) {
var theta = alpha * i,
theta2 = alpha * (i + 1);
points.push({
x : (Math.cos(theta) * radius) + cx,
y : (Math.sin(theta) * radius) + cy,
ex : (Math.cos(theta2) * radius) + cx,
ey : (Math.sin(theta2) * radius) + cy,
py : (Math.sin(theta) * radius) + cy
});
i+=2;
}
}
for (i = 0; i < points.length; i++) {
var p = points[i];
ctx.strokeStyle = '#fff';
ctx.quadraticCurveTo(p.x, p.py, p.x, p.y);
ctx.stroke();
}
It works, but the lines are currently straight (which is obvious, since I am using the points x and y coordinates for the control point):
I am looking for a way to automatically calculate the poisitions for the control points based on the circle radius and the number of points... All help is more then welcome