JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

html, body {
  margin: 0px;
}
canvas {
  border: 10px solid #f00;
  width: 100vw;
  max-width: 177.78vh; /* 16/9 = 1.778 */
  max-height: 100vh;
  aspect-ratio: 16 / 9;
  box-sizing: border-box;
}