JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>

	<title> Basic Shapes </title>
 
 


</head>



<body
id     = "bTag"
onload = "init_sys()"
>

  <table 
  id = "scoreBoard"
  > 


    <tr>
      <td
      rowspan = "2"
      >
        <canvas id = "gameEnv" width = "600" height = "500">


        </canvas>
      </td>

      <th>
        <h2> Zip Line Count </h2>
      </th>

      <th>
        <h2> Player Score </h2>
      </th>

    </tr>
 

    <tr>
      <td>
        <p id = "score"> </p>
      </td>

      <td>
        <p id = "zLCount"> </p>
      </td>
    </tr>
  </table>

	


 	

    
</body>



</html>

CSS

canvas
    {
    	border: 2px solid #606060;
        
    }

    img#ship
    {
      display: none;  

    }

    table#scoreBoard
    {
      padding: 0px 0px 0px 0px;
      margin : 0px 0px 0px 0px;


    }

    table#scoreBoard tr
    {
      padding: 0px 0px 0px 0px;
      margin : 0px 0px 0px 0px;
      

    }

    table#scoreBoard tr th
    {
      padding: 0px 0px 0px 0px;
      margin : 0px 0px 0px 0px;

      height : 60px;
      width  : 170px;
      color  : #606060;
      border-bottom: 2px solid #606060;
      

    }

    table#scoreBoard tr td
    {
      padding    : 0px 0px 0px 0px;
      margin     : 0px 0px 0px 0px;

      /*border : 2px solid #c0c0c0;*/
      vertical-align: top;
      color      : #6405fa;
      font-size  : 40px;
      font-weight: bold;
      text-align : center;
      

    }

JavaScript

// -- HTML 5 canvas
      var 
      canvas,
      ctx,
      redrawCon,
      sampleCount;

      // -- rectangle
      var 
      xPos    = 20,
      yPos    = 20,
      rWidth  = 20,
      rHeight = 100;

      // -- vars for rectangle 2
  	  var
  	  xPos2    = 350,
  	  yPos2    = 200,
  	  rWidth2  = 20,
  	  rHeight2 = 100;


      // -- circle
      var
      cXPos   = 275,
      cYPos   = 230,
      cRad    = 30,               // -- radius
      cSAngle = 0,                // -- circle start angle
      cEAngle = Math.PI * 2,      // -- circle end angle
      ccw     = true,             // -- counter clock wise = true
      cXDir   = 1,
      cYDir   = -1,
      cXStep  = 3,
      cYStep  = 3;

      var 
      canvas,
      ctx,
      redrawCon,
      sampleCount;

    function init_sys()
    {
      canvas = document.getElementById('gameEnv');
      ctx    = canvas.getContext('2d');
      sampleCount = 0;

      xPos    = 20;
      yPos    = 20;
      rWidth  = 20;
      rHeight = 100;

      // -- draw rectangle
      ctx.fillStyle = "#ffd700";
      ctx.rect(xPos, yPos, rWidth, rHeight);
      ctx.fill();


      // -- JS Challenge Code Below
      // -- draw rectangle 2
      ctx.fillStyle = "#f9a8fa";
      ctx.rect(xPos2, yPos2, rWidth2, rHeight2);
      ctx.fill();


      // -- draw circle
      ctx.fillStyle = "#a56500";
      ctx.beginPath();
      ctx.arc( cXPos, cYPos, cRad, cSAngle, cEAngle, ccw );
      ctx.fill();


      // -- keyboard control
      window.addEventListener( "keypress", check_key );


      // -- redraw every 60 Hz
      redrawCon = window.requestAnimationFrame(draw_game);

    }

    // -- 
    function draw_game()
    {
      // -- wipe it all off
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      sampleCount++;
      console.log( "sampleCount: " + sampleCount );

 
      // -- draw rectangle 2   
      ctx.fillStyle = "#606060";
      ctx.beginPath();      
      ctx.rect(xPos2, yPos2, rWidth2, rHeight2);
  ...