RyanBalfanz/index.html

## index.html
<!DOCTYPE html>
<html>

<body>
  <canvas id="canvas" width="400" height="300" style="background-color:#333"></canvas>
  <script>
    console.info('Adapted for ARTIFACT from https://www.w3schools.com/graphics/canvas_clock_start.asp');

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var radius = canvas.height / 2;
    ctx.translate(radius + 50, radius);
    radius = radius * 0.90;

    setInterval(drawClock, 1000);
    drawClock();

    function drawClock() {
      console.log('drawing clock');
      drawFace(ctx, radius);
      drawNumbers(ctx, radius);
      drawTime(ctx, radius);
    }

    function drawFace(ctx, radius) {
      var grad;
      ctx.beginPath();
      ctx.arc(0, 0, radius, 0, 2 * Math.PI);
      ctx.fillStyle = 'white';
      ctx.fill();
      grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);
      grad.addColorStop(0, '#333');
      grad.addColorStop(0.5, 'white');
      grad.addColorStop(1, '#333');
      ctx.strokeStyle = grad;
      ctx.lineWidth = radius * 0.1;
      ctx.stroke();
      ctx.beginPath();
      ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
      ctx.fillStyle = '#333';
      ctx.fill();
    }

    function drawNumbers(ctx, radius) {
      var ang;
      var num;
      ctx.font = radius * 0.15 + "px arial";
      ctx.textBaseline = "middle";
      ctx.textAlign = "center";
      for (num = 1; num < 13; num++) {
        ang = num * Math.PI / 6;
        ctx.rotate(ang);
        ctx.translate(0, -radius * 0.85);
        ctx.rotate(-ang);
        ctx.fillText(num.toString(), 0, 0);
        ctx.rotate(ang);
        ctx.translate(0, radius * 0.85);
        ctx.rotate(-ang);
      }
    }

    function drawTime(ctx, radius) {
      var now = new Date();
      var hour = now.getHours();
      var minute = now.getMinutes();
      hour = hour % 12;
      hour = (hour * Math.PI / 6) +
        (minute * Math.PI / (6 * 60));
      drawHand(ctx, hour, radius * 0.5, radius * 0.07);
      minute = (minute * Math.PI / 30);
      drawHand(ctx, minute, radius * 0.8, radius * 0.07);
    }

    function drawHand(ctx, pos, length, width) {
      ctx.beginPath();
      ctx.lineWidth = width;
      ctx.lineCap = "round";
      ctx.moveTo(0, 0);
      ctx.rotate(pos);
      ctx.lineTo(0, -length);
      ctx.stroke();
      ctx.rotate(-pos);
    }
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<body>
	<canvas id="canvas" width="400" height="300" style="background-color:#333"></canvas>
	<script>
	console.info('Adapted for ARTIFACT from https://www.w3schools.com/graphics/canvas_clock_start.asp');

	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	var radius = canvas.height / 2;
	ctx.translate(radius + 50, radius);
	radius = radius * 0.90;

	setInterval(drawClock, 1000);
	drawClock();

	function drawClock() {
	console.log('drawing clock');
	drawFace(ctx, radius);
	drawNumbers(ctx, radius);
	drawTime(ctx, radius);
	}

	function drawFace(ctx, radius) {
	var grad;
	ctx.beginPath();
	ctx.arc(0, 0, radius, 0, 2 * Math.PI);
	ctx.fillStyle = 'white';
	ctx.fill();
	grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);
	grad.addColorStop(0, '#333');
	grad.addColorStop(0.5, 'white');
	grad.addColorStop(1, '#333');
	ctx.strokeStyle = grad;
	ctx.lineWidth = radius * 0.1;
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
	ctx.fillStyle = '#333';
	ctx.fill();
	}

	function drawNumbers(ctx, radius) {
	var ang;
	var num;
	ctx.font = radius * 0.15 + "px arial";
	ctx.textBaseline = "middle";
	ctx.textAlign = "center";
	for (num = 1; num < 13; num++) {
	ang = num * Math.PI / 6;
	ctx.rotate(ang);
	ctx.translate(0, -radius * 0.85);
	ctx.rotate(-ang);
	ctx.fillText(num.toString(), 0, 0);
	ctx.rotate(ang);
	ctx.translate(0, radius * 0.85);
	ctx.rotate(-ang);
	}
	}

	function drawTime(ctx, radius) {
	var now = new Date();
	var hour = now.getHours();
	var minute = now.getMinutes();
	hour = hour % 12;
	hour = (hour * Math.PI / 6) +
	(minute * Math.PI / (6 * 60));
	drawHand(ctx, hour, radius * 0.5, radius * 0.07);
	minute = (minute * Math.PI / 30);
	drawHand(ctx, minute, radius * 0.8, radius * 0.07);
	}

	function drawHand(ctx, pos, length, width) {
	ctx.beginPath();
	ctx.lineWidth = width;
	ctx.lineCap = "round";
	ctx.moveTo(0, 0);
	ctx.rotate(pos);
	ctx.lineTo(0, -length);
	ctx.stroke();
	ctx.rotate(-pos);
	}
	</script>
	</body>

	</html>