How to get an array of coordinates that make up a circle in canvas?

Question

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 =          


        

Answer 1

@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

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.