JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="xCanvas" width="400" height="200"/>

CSS

#xCanvas{
  background-color:#000;
  position:absolute;
}

html, body{
  width:100%;
  height:100%;
}

JavaScript

function setCanvas(){
    
       var canvasNode = document.getElementById('xCanvas');
       
       var pw = canvasNode.parentNode.clientWidth;
       var ph = canvasNode.parentNode.clientHeight;
       
       canvasNode.height = pw * 0.8 * (canvasNode.height/canvasNode.width);  
       canvasNode.width = pw * 0.8;
       canvasNode.style.top = (ph-canvasNode.height)/2 + "px";
       canvasNode.style.left = (pw-canvasNode.width)/2 + "px";
       
       
    }
    
    window.onresize = setCanvas;
    setCanvas();