Webleb - UI Elements - Hypotenuse Calculator: HTML, JavaScript, Canvas

HTML

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simulador de la Hipotenusa</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 20px;
  }
  h1 {
    text-align: center;
  }
  #inputs {
    display: flex;
    flex-direction: column;
    max-width: 300px;
    margin: auto;
  }
  label {
    margin-top: 10px;
  }
  input {
    padding: 5px;
    font-size: 1em;
  }
  button {
    margin-top: 15px;
    padding: 10px;
    font-size: 1em;
    cursor: pointer;
  }
  #resultado {
    margin-top: 20px;
    text-align: center;
    font-size: 1.2em;
  }
  canvas {
    display: block;
    margin: 20px auto;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>

<h1>Simulador de la Hipotenusa</h1>

<div id="inputs">
  <label>Ingrese cateto a:
    <input type="number" id="catetoA" min="0" />
  </label>
  <label>Ingrese cateto b:
    <input type="number" id="catetoB" min="0" />
  </label>
  <button onclick="calcularHipotenusa()">Calcular Hipotenusa</button>
  <button onclick="calcularCatetoA()">Calcular Cateto a</button>
  <button onclick="calcularCatetoB()">Calcular Cateto b</button>
</div>

function limpiarCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function dibujarTriangulo(catetoA, catetoB, hipotenusa) {
  limpiarCanvas();

// Escala para que el triángulo quepa en el canvas
  const maxDim = Math.max(catetoA, catetoB, hipotenusa);
  const scale = 300 / maxDim; // 300 es un tamaño máximo en px

const a = catetoA * scale;
  const b = catetoB * scale;

// Coordenadas del triángulo
  ctx.beginPath();
  ctx.moveTo(50, 350); // punto A (origen)
  ctx.lineTo(50, 350 - b); // cateto B (vertical)
  ctx.lineTo(50 + a, 350); // cateto A (horizontal)
  ctx.closePath();

ctx.strokeStyle = 'blue';
  ctx.lineWidth = 2;
  ctx.stroke();

// Hipotenusa (línea diagonal)
  ctx.beginPath();
  ctx.moveTo(50, 350 - b);
  ctx.lineTo(50 + a, 350);
  ctx.strokeStyle = 'red';
  ctx.stroke();

// Etiquetas
  ctx.font = '14px Arial';
  ctx.fillStyle = 'black';

ctx.fillText(`a = ${catetoA}`, 50 + a/2, 370);
  ctx.fillText(`b = ${catetoB}`, 20, 350 - b/2);
  ctx.fillText(`c = ${hipotenusa.toFixed(2)}`, (50 + a/2), (350 - b/2));
}

</body>
</html>

CSS

JS