Dynamic circle using css and javascript only

Question

I’m trying to develop a dynamic circle using only css and javascript, at first I don’t want to use any library and I can’t use the html canvas.

My idea is to be able to define the size of the circle as follows: the first mouse click will define the center of the circle and the following will define the radius. This is possible to accomplish?!

My code today:

 #circulo{ 
  background: #666;
  border-radius:100%;
  width:150px;
  height:150px;
}

<!-- html -->
<div id="circulo"></div>

I’m having trouble creating javascript, can someone give me some example?

Answer 1

It is possible:

//Primeiro definimos as variaveis

//para sabermos se é o primeiro ou segundo clique
var click = false;

//posições x e y do primeiro clique
var c1x = 0;
var c1y = 0;

//posições x e y do segundo clique
var c2x = 0;
var c2y = 0;

//evento para quando clicam na pagina
document.onclick = function(e) {
    if(click == false) {
        //é a primeira vez que clica, vamos mudar a variavel para true
        click = true;
		
        //Atribuimos os valores às variaveis criadas antes
        c1x = e.clientX;
        c1y = e.clientY;
    } else {
        //é a segunda vez que clica, vamos voltar a colocar false
        click = false;
		
        //Atribuimos os valores às variaveis criadas antes
        c2x = e.clientX;
        c2y = e.clientY;
		
        //Como é o segundo clique, vamos desenhar o circulo
        circulo();
    }
}

function circulo() {
    //Primeiro fazemos a matematica para descobrir a distancia
    //entre o primeiro e o segundo clique
    //usando as variaveis declaradas antes
    
    var cx3 = c2x - c1x;
    cx3 = cx3 * cx3;
	
    var cy3 = c2y - c1y;
    cy3 = cy3 * cy3;
	
    //Depois de calcular a distancia, multiplicamos por 2
    //Para saber o diametro para usar como largura e altura do circulo
    var dis = Math.sqrt(cx3 + cy3) * 2;
	
    //Vamos "buscar" o circulo
    var cir = document.getElementById('circulo');
	
    //Definimos a sua posição para o primeiro clique
    //Retiramos metade da distancia para o circulo ficar no meio
    cir.style.top = (c1y - dis / 2) + 'px';
    cir.style.left = (c1x - dis / 2) + 'px';
	
    //E finalmente, damos a largura e altura ao circulo
    cir.style.width = dis + 'px';
    cir.style.height = dis + 'px';
}

/*
position: absolute;
    para colocarmos o circulo em qualquer lugar da pagina
border-radius: 100%;
    para ser um circulo
*/
#circulo {
    position: absolute;
    background: #666;
    border-radius:100%;
}

<!-- o circulo -->
<div id="circulo"></div>