Try it Yourself: Graphics Canvas Clock Project

Graphics Canvas Clock Project

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<canvas id="clock" width="300" height="300"></canvas>

<script>
function getHandAngles() {
  const now = new Date();
  const hours = now.getHours() % 12;
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();

  const secondAngle = seconds * (Math.PI / 30);
  const minuteAngle = minutes * (Math.PI / 30) + secondAngle / 60;
  const hourAngle = hours * (Math.PI / 6) + minuteAngle / 12;

  return { hourAngle, minuteAngle, secondAngle };
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<canvas id="clock" width="300" height="300"></canvas>

<script>
function getHandAngles() {
  const now = new Date();
  const hours = now.getHours() % 12;
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();

  const secondAngle = seconds * (Math.PI / 30);
  const minuteAngle = minutes * (Math.PI / 30) + secondAngle / 60;
  const hourAngle = hours * (Math.PI / 6) + minuteAngle / 12;

  return { hourAngle, minuteAngle, secondAngle };
}
</script>

</body>
</html>