Drawing point on circle

Question

I have a circle I created:

<div class='ring'></div>

.ring {
    border-radius: 50%;
    border: 2px solid;
  }

I need to draw points on the arc (like point A) and points inside the circle (like point B), how can I do it wisely? meaning that I will have the option to understand and adding points wherever I want to on the circle.

See http://stackoverflow.com/questions/839899/how-do-i-calculate-a-point-on-a-circle-s-circumference — T.J. Crowder, Sep 20 '15 at 16:24

score 27 · Accepted Answer · answered Sep 20 '15 at 21:56

You won't be able to do that using CSS. The easiest way is to use HTML5 Canvas. Here is an example with some functions I created:

HTML

<canvas id="myCanvas" width="300" height="300">Your browser does not support the HTML5 canvas tag.</canvas>

JS

//Define Variables
var radius = 80;
var point_size = 4;
var center_x = 150;
var center_y = 150;
var font_size = "20px";

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function drawCircle(){
    ctx.beginPath();
    ctx.arc(center_x, center_y, radius, 0, 2 * Math.PI);
    ctx.stroke();
}

function drawPoint(angle,distance,label){
    var x = center_x + radius * Math.cos(-angle*Math.PI/180) * distance;
    var y = center_y + radius * Math.sin(-angle*Math.PI/180) * distance;

    ctx.beginPath();
    ctx.arc(x, y, point_size, 0, 2 * Math.PI);
    ctx.fill();

    ctx.font = font_size;
    ctx.fillText(label,x + 10,y);
}

//Execution
drawCircle();
drawPoint(0,1,"A");
drawPoint(90,1.5,"B");
drawPoint(180,1,"C");
drawPoint(45,0.5,"D");

This will generate the folowing output:

Take a look how the angle and distance variables of the drawPoint function controls where the point will be located.

score 2 · Answer 2 · answered Sep 20 '15 at 16:31

2

you can add points using a simple math functions. You just must to know radius of this circle and angle (when you want to put circle). And then just use sin and cos to find out position of point.

for example to put point on circle edge on 45 degree:

x = radius + radius * sin(45);
y = radius + radius * cos(45);

So now you can use this position to create the dots.

answered Sep 20 '15 at 16:31

Illia Moroz

343
1
2
13

a good solution. no need to complicate everything with canvas – Stepan Yakovenko Sep 21 '15 at 04:15
This is wrong in so many ways: 1) the `sin()` and `cos()` functions are the other way around, 2) the parametric function considers the circle center position, not only the radius, 3) this doesn't considers how to draw points **inside** the circle, and 4) this doesn't even says hoy to actually **draw** the points (something that is in the title and in the question) – Alvaro Flaño Larrondo Sep 23 '15 at 00:02
This is thing for how to do. I suggested way to solve, not the ready option.When you have the coordinates, drawling circles is very easely even using html block with absolute position and border-radius on 50%. About points inside - just decrease the radius value. Again, I give the opportunity to learn, and not offer ready solutions. This is the best way. – Illia Moroz Sep 23 '15 at 18:55
@ІлляМороз. Still the functions are wrong, **very wrong**. They should be: `x = centerX + radius * cos(45);` and `y = centerY + radius * sin(45);`. At least update ypur answer with the correct ones. – Alvaro Flaño Larrondo Sep 25 '15 at 20:24

Drawing point on circle

2 Answers2