JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <div id="container">
            <canvas id="example" width="1280" height="800"></canvas>
        </div>
    </body>

CSS

body {
    height: 100%;

}
#container {
    height: 100%;
}
#example {
    position: absolute;
    left : 0px;
    top : 0px;

JavaScript

var canvas = document.getElementById("example");
var ctx = canvas.getContext('2d');
var cornerRadius = 10;

function drawMe() { 
  ctx.fillStyle = "red";
  ctx.strokeStyle = "red";
  ctx.lineJoin = "round";
  ctx.lineWidth = cornerRadius;
  ctx.strokeRect(5+(cornerRadius/2), 23+(cornerRadius/2), 155-cornerRadius, 406-cornerRadius);
  ctx.fillRect(5+(cornerRadius/2), 23+(cornerRadius/2), 155-cornerRadius, 406-cornerRadius);
    ctx.font = '16pt Arial';
    ctx.fillStyle = 'white';
    ctx.textAlign="start";
    ctx.fillText('Text', 8, 70);
    ctx.fillText('Text', 8, 128);
}
    

function redraw() {
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = '5';
    ctx.strokeRect(0, 0, window.innerWidth, window.innerHeight);
    drawMe();
}
window.onload = function () {
    redraw();
};
drawMe();