JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>

    <canvas id="c"></canvas>

</body>
</html>

CSS

body { margin: 0; padding: 0 }
#c { position: absolute; width: 100%; height: 100%; overflow: hidden }

JavaScript

function redraw() {
    var cc = c.getContext("2d");
    c.width = c.clientWidth;
    c.height = c.clientHeight;
    cc.scale(c.width, c.height);

    // Draw a circle filling the canvas
    // with a random color so we can see when redrawn.    
    cc.fillStyle = randomColor();
    cc.beginPath();
    cc.arc(0.5, 0.5, .5, 0, 2*Math.PI);
    cc.fill();
}

function randomColor() {
    return '#' + Math.floor(Math.random()*0xffffff).toString(16);
}

// update on any window size change.
window.addEventListener("resize", redraw);

// first draw
redraw();