JSFiddle - React, Tailwind, and code Playground

by alex bollbach

HTML

<body>
  <div class="App">


    <div class="TopBar">

      <div class="TopBarElement1">

        <div class="TopBarElement1Content">
          topbarElement1Content
        </div>

      </div>

      <div class="TopBarElement2">

        <canvas width="0" height="0" class="Canvas" id="CanvasID1">
        </canvas>

      </div>

      <div class="TopBarElement3">

      </div>

    </div>

    <div class="Content">

    </div>

  </div>
</body>

CSS

.App {
  width: 100%;
  height: 100vh;
  background-color: grey;
  display: grid;
  grid-template-rows: 20vh 80vh
}

.TopBar {
  background-color: green;
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
}

.TopBarElement1 {
  background-color: red;
  /* overflow: hidden; */
}

.TopBarElement2 {
  background-color: rgba(200, 200, 200, 0.3);

}

.TopBarElement3 {
  background-color: clear;

}

.TopBarElement1Content {
  /* height: 300px; */
}

.TopBarElement2Content {
  /* height: 300px; */
}

.Content {
  background-color: orange;
}

.Canvas {
  width: 100%;
  height: 100%;
  display: block;
  /*background-color: purple;*/
}

JavaScript

function test() {

  var a = document.getElementById("CanvasID1")
  
  if (!a) return;
  
  
  var rect = a.parentNode.getBoundingClientRect();
a.width = rect.width;
a.height = rect.height;
  
  var ctx = a.getContext('2d')
  ctx.fillStyle = "brown";
  console.log(ctx)
  ctx.rect(0, 0, a.width, a.height);


  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(a.width, a.height);
  ctx.stroke();
  

}

test()