app.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>BMP Creator</title>
  <link rel="stylesheet" href="style.css">
  <script src="jquery-3.3.1.min.js"></script>
  <script src="script.js"></script>

</head>

<body>
  <div>
    <h4>BMP Creator</h4>
    <hr>
    <div class="">
      <label>W:</label>
      <input type="text" id="txtBmpWidth" class="txtBmpSize" value="10">
      <label>px</label>
      <label>H:</label>
      <input type="text" id="txtBmpHeight" class="txtBmpSize" value="10">
      <label>px</label>
      <button id="btnCreateNewCanvas">Create New Bmp</button>
      <button id="btnAnimate">Animate</button>
      <label id="lblPixelUnderCursor">&nbsp;</label>
    </div>
    <hr>

    <div class="divAnimationContainer">
      <table class="tableCanvas" id="table-animation"></table>
      </table>

    </div>
    <br>
    <div class="divCanvasContainer">
      <table class="tableCanvas" id="table-canvas-0"></table>
      </table>
      <br>
      <label>Editable Binary Matrix</label>
      <br>
      <textarea name="" id="txtarea-canvas-0" class="text-area-canvas" cols="10" rows="10"></textarea>
      <hr>
      <input type="checkbox" id="chkIncludeDim-0" checked>Dim
      <input type="checkbox" id="chkValInHex-0">Hex
      <button id="btnEncode-0">Encode</button>
      
      <br>
      <textarea name="" id="txtarea-canvas-encoded-0" readonly class="text-area-canvas-encoded" cols="10" rows="10"></textarea>
    </div>
    <div class="divCanvasContainer">
      <table class="tableCanvas" id="table-canvas-1"></table>
      </table>
      <br>
      <label>Editable Binary Matrix</label>
      <br>
      <textarea name="" id="txtarea-canvas-1" class="text-area-canvas" cols="10" rows="10"></textarea>
    </div>
  </div>
</body>

</html>