JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<canvas id="example"></canvas>
</body>

CSS

* {
	padding: 0;
	margin: 0;
}
body {
	background: #000;
    height: 100vh;
	width: 100%;

}
#example {
    position: absolute;
    left : 0px;
    top : 0px;

JavaScript

var canvas = document.getElementById("example");
var ctx = canvas.getContext('2d');
var cornerRadius = 10;
var wH = window.innerHeight;
var wW = window.innerWidth;

function drawMe() { 
	canvas.height = wH;
	canvas.width = wW;
  ctx.fillStyle = "red";
  ctx.strokeStyle = "red";
  ctx.lineJoin = "round";
  ctx.lineWidth = cornerRadius;
  ctx.strokeRect(wW*0.1+(cornerRadius/2), wH*0.1+(cornerRadius/2), wW*0.8-cornerRadius, wH*0.8-cornerRadius);
  ctx.fillRect(wW*0.1+(cornerRadius/2), wH*0.1+(cornerRadius/2), wW*0.8-cornerRadius, wH*0.8-cornerRadius);
    ctx.font = '16pt Arial';
    ctx.fillStyle = 'white';
    ctx.textAlign="start";
    ctx.fillText('Text', wW*0.2, wH*0.2);
    ctx.fillText('Text', wW*0.2, wH*0.4);
}
    

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

window.addEventListener("resize", function () {
	wH = window.innerHeight;
	wW = window.innerWidth;
	drawMe();
	redraw();
});