JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mydiv" style="border: solid 1px gray; width:100%; height:100%;">
    <canvas tabindex="1" id="mycanvas" style="outline: 0; background: #000; top: 0px; left: 0px;"></canvas>
</div>

JavaScript

function update() {
    var canvasNode = document.getElementById('mycanvas');
    var div = document.getElementById('mydiv');
    canvasNode.width = div.clientWidth;
    canvasNode.height = div.clientHeight;
}

window.requestAnimFrame = (function() {
    return (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback, element) {
        window.setTimeout(callback, 1000 / 60);
    });
})();

window.onload = function loop() {
    update();
    window.requestAnimFrame(loop);
};