JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>

	<title> Basic Shapes </title>
</head>



<body
id     = "bTag"
>

  <table 
  id = "scoreBoard"
  > 


    <tr>
      <td
      rowspan = "2"
      >
        <img id="gameBG" src="https://vuongducnguyen.com/images/2291870-1024x768-%5bDesktopNexus.com%5d.jpg" alt="gameBG" width="600" height="500">

        <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;
      

    }

    img#gameBG
    {
      padding    : 0px 0px 0px 0px;
      margin     : 0px 0px 0px 0px;

      display    : none;
    }

JavaScript

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

      /* ================================
      * Class Definition
      *
      * ================================= */
 
 

      // -- costume
      var 
      dotImgArr = [],
      costumeIndex;

      // -- backgroudn image
      var 
      img,
      clipX = 0,      // -- offset of the cropped image to the real image
      clipY = 0,
      clipW = 600,
      clipH = 500,
      imgX  = 0,      // -- position the entire block
      imgY  = 0,
      imgW  = 600,
      imgH  = 500,
      clipXLimit = 0,
      clipYLimit = 0;      


      window.onload = function() 
      {
        // -- canvas
        canvas = document.getElementById('gameEnv');
        ctx    = canvas.getContext('2d');
        img    = document.getElementById("gameBG");
 
 
        //ctx.drawImage(img, 90, 130, 50, 60, 10, 10, 50, 60);
        ctx.drawImage(img, clipX, clipY, clipW, clipH, imgX, imgY, imgW, imgH);
 
         
        
        init_sys();
        
      };


    function init_sys()
    {
 
      sampleCount   = 0;
      mouseClckFlag = 0;
      playerScore   = 0;
      levelUp       = 1;
      sShipArr      = [];

 

      /* ================================
      * Create Objects
      *
      * ================================= */



      // -- 
      costumeIndex = 0;

      var imgObj = new Image();
      imgObj.src = "https://vuongducnguyen.com/images/asteroid.png";
      dotImgArr.push( imgObj );

      imgObj = new Image();
      imgObj.src = "https://vuongducnguyen.com/images/packM.png";
      dotImgArr.push( imgObj );

      imgObj = new Image();
      imgObj.src = "https://vuongducnguyen.com/images/green_line.png";
      dotImgArr.push( imgObj );



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

    }

    // -- 
    function draw_game()
    {
      // -- wipe it all off
      ctx.clearRect(0, 0, canvas.width,...