snail slime clock

clock that shows the next multiple of 5 minutes by adding 1 line at a time like a snail walking

by asteriskman

HTML

<canvas id='cmain' width='250' height='250'></canvas>
<canvas id='cgoal' width='250' height='250'></canvas>
<canvas id='ctest' width='250' height='250'></canvas>

CSS

body {
  background: black;
}

canvas {
  background: white;
}

#ctest {
  display: none;
}

#cgoal {
  display: none;
}

#cmain {
  width: 600px;
  height: 600px;
}

JavaScript

const cmain = document.getElementById('cmain');
const cgoal = document.getElementById('cgoal');
const ctest = document.getElementById('ctest');
const ctxMain = cmain.getContext('2d', {alpha: false});
const ctxGoal = cgoal.getContext('2d', {alpha: false});
const ctxTest = ctest.getContext('2d', {alpha: false});

//get the data we want to display the time for
function getTargetDate() {
  let curDate = new Date();
  let c = 1000 * 60 * 5;
  //round up to the next multiple of 5 minutes
  let targetDate = new Date(Math.round((curDate.getTime() + c/2)/c) * c);
  return targetDate;
}

//convert time into string with spaces between characters
function getTimeString() {
  let targetDate = getTargetDate();
  let [h,m] = targetDate.toLocaleTimeString().split` `[0].split`:`;
  let baseString = `${h}:${m}`;
  let displayString = baseString.split``.join` `;
  return displayString;
}

//draw the goal image on the goal canvas
function drawGoal() {
  let ctx = ctxGoal;
  ctx.save();
  //ctx.clearRect(0, 0, cgoal.width, cgoal.height);
  ctx.fillStyle = '#FFFFFF';
  ctx.fillStyle = '#000000';
  ctx.fillRect(0, 0, cgoal.width, cgoal.height);
  ctx.translate(cgoal.width * 0.5, cgoal.height * 0.5);
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  let fontSize = 60 * cgoal.width / 300;
  ctx.font = `${fontSize}px "Arial Black"`;
  ctx.fillStyle = '#FFFFFF';
  let displayString = getTimeString();
  ctx.fillText(displayString, 0, 0);
  ctx.restore();
  goalData = undefined; //reset the goal data so it will be re-generated
}

let numPins = 100; //num points around circle
let radius = cmain.width * 0.5; //radius of pin circle

//move to pin number, potentially drawing a line
function moveToPin(ctx, n, drawLine) {
  let angle = Math.PI * 2 * n / numPins;
  let x = radius * Math.cos(angle);
  let y = radius * Math.sin(angle);
  if (drawLine) {
    ctx.lineTo(x, y);
  } else {
    ctx.moveTo(x, y)
  }
}

let goalData;
const wsquared = cmain.width * cmain.width;
//get the sum of...