Trigometria canvas js

trigometry.js

//<canvas><canvas>
  
function degreeToradians(degrees) {
  return degrees * Math.PI / 180;
}

function getPosition(centerX, centerY, radius, endAngle) {
  // Calculamos las coordenadas x e y del punto final del arco.
  var x = centerX + radius * Math.cos(endAngle);
  var y = centerY + radius * Math.sin(endAngle);

  // Retornamos las coordenadas x e y.
  return { x: x, y: y };
}

function getQuadrant(angle) {
  // Convertimos el ángulo a grados.
  angle = angle * 180 / Math.PI;

  // Calculamos el cuadrante.
  var quadrant = Math.floor((angle + 90) / 90);

  // Retornamos el cuadrante.
  return quadrant;
}


var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;

var progress = 0.7;
var minAngle = 180;
var maxAngle = 360;

var resultado = (progress * (maxAngle - minAngle)) + minAngle;

console.log(resultado); // 180
var startAngle = degreeToradians(minAngle)
var endAngle = degreeToradians(resultado);

context.beginPath();
//context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.arc(centerX, centerY, radius, startAngle, endAngle, false);

context.fillStyle = 'skyblue';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#030';
context.stroke();

var position = getPosition(centerX, centerY, radius, endAngle);

context.fillStyle = 'red';
context.fillRect(position.x, position.y, 2, 2);

console.log(position); 

var quadrant = getQuadrant(endAngle);
console.log("quadrant", quadrant);

var height = radius * Math.sin(endAngle);
var width = radius * Math.cos(endAngle);

console.log("height", height); // 50
console.log("width", width); // 0

context.strokeStyle = 'blue';

// Dibujamos la línea.
context.beginPath();
context.moveTo(position.x, position.y);
context.lineTo(position.x, position.y - height);
context.stroke();

context.beginPath();
context.moveTo(position.x, position.y - height);
context.lineTo(centerX, position.y - height);
context.stroke();