So, if this is the code I\'m using to draw a circle on my canvas:
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.lineWidth =
@Octopus is on the right track:
var centerX=100;
var centerY=100;
var radius=40;
// an array to save your points
var points=[];
for(var degree=0;degree<360;degree++){
var radians = degree * Math.PI/180;
var x = centerX + radius * Math.cos(radians);
var y = centerY + radius * Math.sin(radians);
points.push({x:x,y:y});
}
Then you can draw the circle using the point objects in the points array:
ctx.beginPath();
ctx.moveTo(points[0].x,points[0].y);
for(var i=1;i<points.length;i++){
ctx.lineTo(points[i].x,points[i].y);
}
ctx.closePath();
ctx.fillStyle="skyblue";
ctx.fill();
ctx.strokeStyle="lightgray";
ctx.lineWidth=3;
ctx.stroke()
A suggestion, however...
Instead of saving all the points in the database, just save the centerX/Y and radius in the database.
Then you can use this same math to create the points and draw the circle.
You are asking for the formula for a circle which is:
radius*radius = (x-centerX)*(x-centerX) + (y-centerY)*(y-centerY)
Or if you want to generate n points do something like this:
for (i=0;i<n;i++) {
x[i] = centerX + radius* Math.cos( (i*2*Math.PI)/n );
y[i] = centerY + radius*-Math.sin( (i*2*Math.PI)/n );
}