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 drawClock() {
  ctx.save();
  ctx.clearRect(-radius, -radius, canvas.width, canvas.height);

  drawFace(ctx, clockRadius);
  drawTicks(ctx, clockRadius);

  const { hourAngle, minuteAngle, secondAngle } = getHandAngles();
  drawHand(ctx, hourAngle, clockRadius * 0.5, clockRadius * 0.07);
  drawHand(ctx, minuteAngle, clockRadius * 0.8, clockRadius * 0.05);

  ctx.strokeStyle = '#d9534f';
  drawHand(ctx, secondAngle, clockRadius * 0.9, clockRadius * 0.02);

  ctx.restore();
}
</script>

</body>
</html>

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

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

<script>
function drawClock() {
  ctx.save();
  ctx.clearRect(-radius, -radius, canvas.width, canvas.height);

  drawFace(ctx, clockRadius);
  drawTicks(ctx, clockRadius);

  const { hourAngle, minuteAngle, secondAngle } = getHandAngles();
  drawHand(ctx, hourAngle, clockRadius * 0.5, clockRadius * 0.07);
  drawHand(ctx, minuteAngle, clockRadius * 0.8, clockRadius * 0.05);

  ctx.strokeStyle = '#d9534f';
  drawHand(ctx, secondAngle, clockRadius * 0.9, clockRadius * 0.02);

  ctx.restore();
}
</script>

</body>
</html>