Matrix with time

<!DOCTYPE html>
<html>
<head>
  <title>Japanese Matrix Background with Time</title>
  <style>
    body { background-color: black; overflow: hidden; }
    canvas { display: block; position: absolute; top: 0; left: 0; }
  </style>
</head>
<body>
  <canvas id="matrix"></canvas>
  <canvas id="time"></canvas>

  <script>
    const mc = document.getElementById('matrix'), mx = mc.getContext('2d'), tc = document.getElementById('time'), tx = tc.getContext('2d');
    let mw = mc.width = tc.width = window.innerWidth, mh = mc.height = tc.height = window.innerHeight;
    const h = 'あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん', fs = 16, c = mw / fs, d = [];
    let s = 33, timeX = mw / 2, timeY = mh / 2, tvx = 1, tvy = 1, ts = 1, tfs = 0, tst = 0; // tst: 0-bouncing, 1-middle, 2-hidden
    for (let i = 0; i < c; i++) d[i] = 1;

    function draw() {
      mx.fillStyle = 'rgba(0,0,0,0.05)';
      mx.fillRect(0, 0, mw, mh);
      mx.fillStyle = '#0F0';
      mx.font = `${fs}px monospace`;
      for (let i = 0; i < d.length; i++) {
        mx.fillText(h[Math.floor(Math.random() * h.length)], i * fs, d[i] * fs);
        if (d[i] * fs > mh && Math.random() > 0.975) d[i] = 0;
        d[i]++;
      }

      tx.clearRect(0, 0, mw, mh);
      if (tst !== 2) {
        const now = new Date(), hrs = now.getHours().toString().padStart(2, '0'), min = now.getMinutes().toString().padStart(2, '0'), sec = now.getSeconds().toString().padStart(2, '0'), timeString = `${hrs}:${min}:${sec}`;
        tx.fillStyle = 'rgba(0,255,0,0.25)';
        tx.font = `${tfs}px monospace`;
        tx.textAlign = 'center';
        tx.textBaseline = 'middle';
        const tw = tx.measureText(timeString).width, th = tfs;
        if (tst === 0) {
          timeX += tvx * ts;
          timeY += tvy * ts;
          if (timeX - tw / 2 < 0 || timeX + tw / 2 > mw) tvx *= -1;
          if (timeY - th / 2 < 0 || timeY + th / 2 > mh) tvy *= -1;
        } else if (tst === 1) {
          timeX = mw / 2;
          timeY = mh / 2;
        }
        tx.fillText(timeString, timeX, timeY);
      }
    }

    function resizeCanvas() {
      mw = mc.width = tc.width = window.innerWidth;
      mh = mc.height = tc.height = window.innerHeight;
      tfs = Math.min(mw, mh) * 0.2;
    }

    resizeCanvas();
    let interval = setInterval(draw, s);
    window.addEventListener('resize', resizeCanvas);
    document.addEventListener('keydown', e => {
      if (e.key === 'ArrowUp' && s > 10) { s -= 5; clearInterval(interval); interval = setInterval(draw, s); }
      else if (e.key === 'ArrowDown') { s += 5; clearInterval(interval); interval = setInterval(draw, s); }
      else if (e.key === 'ArrowLeft' && ts > 1) ts--;
      else if (e.key === 'ArrowRight') ts++;
      else if (e.code === 'Space') tst = (tst + 1) % 3;
    });
  </script>
</body>
</html>