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.

Answer 1

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.

Answer 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.