JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8" />
      <link rel='stylesheet' href='stylesheet.css' />
  </head>
  <body>
      <canvas id='top' class='lineContainer'></canvas>
      <canvas id='side' class='lineContainer'></canvas>
      <canvas id='bottom' class='lineContainer'></canvas>
      <canvas id='hangman' class='lineContainer'></canvas>
      <canvas id='puzzle'></canvas>
      <div id='scorecard'>

      </div>
  </body>
  <script src='gameScript.js'></script>
</html>

CSS

/*HANGMAN STYLES*/

/*CLASS SELECTORS*/
.lineContainer {
  /*border-style: solid;
  border-color: blue;*/
}

#top {
  position: absolute;
  height: 5%;
  width: 45%;
  left: 30%;
}

#side {
  position: absolute;
  bottom: 20%;
  left: 70%;
  height: 78%;
  width: 5%;
}

#bottom {
  position: absolute;
  bottom: 35%;
  height: 5%;
  width: 56%;
  left: 20%;
}

#hangman {
  position: absolute;
  left: 30%;
  height: 40%;
  width: 10%;
}

JavaScript

var canvasTop = document.getElementById('top');
var ctxTop = canvasTop.getContext('2d');

var frameCountTop = 0;
var fpsTop, fpsIntervalTop, startTimeTop, nowTop, thenTop, elapsedTop;

function startAnimatingTop(fpsTop) {
    fpsIntervalTop = 1000 / fpsTop;
    thenTop = Date.now();
    startTimeTop = thenTop;
    drawTop();
}

var topLinePointA = [32, 80];
var topLinePointB = [280, 80];
var topLineStart = topLinePointA[0];
var topLineIncrement = topLineStart + 1;
var topLineEnd = topLinePointB[0];

function drawTop() {
  var i = 32;
  while (i < topLineEnd) {
    requestAnimationFrame(drawTop);
    i++;
    nowTop = Date.now();
    elapsedTop = nowTop - thenTop;
    if (elapsedTop > fpsIntervalTop && i < topLineEnd) {
        thenTop = nowTop - (elapsedTop % fpsIntervalTop);
        ctxTop.lineWidth = 20;
        ctxTop.strokeStyle = "black";
        ctxTop.moveTo(topLineStart, 80);
        ctxTop.lineTo(topLineIncrement, 80);
        ctxTop.stroke();
        topLineStart += 1;
    } else {
      cancelAnimationFrame(drawTop);
      return;
    }
  }
}

startAnimatingTop(100);