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>
const canvas = document.getElementById('clock');
const ctx = canvas.getContext('2d');

const radius = canvas.height / 2;
ctx.translate(radius, radius);
const clockRadius = radius * 0.9;

function drawFace(ctx, radius) {
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.fillStyle = '#f5f5f5';
  ctx.fill();
  ctx.lineWidth = radius * 0.04;
  ctx.strokeStyle = '#333333';
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(0, 0, radius * 0.05, 0, 2 * Math.PI);
  ctx.fillStyle = '#333333';
  ctx.fill();
}

drawFace(ctx, clockRadius);
</script>

</body>
</html>

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

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

<script>
const canvas = document.getElementById('clock');
const ctx = canvas.getContext('2d');

const radius = canvas.height / 2;
ctx.translate(radius, radius);
const clockRadius = radius * 0.9;

function drawFace(ctx, radius) {
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.fillStyle = '#f5f5f5';
  ctx.fill();
  ctx.lineWidth = radius * 0.04;
  ctx.strokeStyle = '#333333';
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(0, 0, radius * 0.05, 0, 2 * Math.PI);
  ctx.fillStyle = '#333333';
  ctx.fill();
}

drawFace(ctx, clockRadius);
</script>

</body>
</html>