JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas"></canvas>
<svg id="svg">
    <clipPath id="clipPath">
        <rect x="50%" y="0" width="50%" height="100%"></rect>
    </clipPath>
    <circle cx="0" cy="20" r="10" fill="#d80" stroke="#a0a" stroke-width="10" clip-path="url(#clipPath)"/>
    <text x="60%" y="50%">SVG</text>
</svg>

CSS

body {
    margin: 0;
    overflow: hidden;
    font-size: 16px;
    font-family: sans-serif;
    font-weight: bold;
}

span {
    position: fixed;
    left: 0;
    top: 0;
}

#canvas {
    position: fixed;
    left: 0;
    top: 0;
}

#svg {
    position: fixed;
    left: 0;
    top: 0;
}

JavaScript

var oldWidth = 0;
var oldHeight = 0;

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var svg = document.getElementById("svg");
var svgCircle = document.querySelector("circle");

function checkSize() {
    if (oldWidth !== window.innerWidth || oldHeight !== window.innerHeight) {
        console.log(window.innerWidth, window.innerHeight);
        var r = Math.min(window.innerWidth, window.innerHeight) * 0.45;
        
        c.width = oldWidth = window.innerWidth;
        c.height = oldHeight = window.innerHeight;
        ctx.beginPath();
        ctx.arc(window.innerWidth / 2, window.innerHeight / 2, r, Math.PI / 2, 3 * Math.PI / 2, false);
        ctx.fillStyle = '#d80';
        ctx.strokeStyle = '#a0a';
        ctx.lineWidth = 10;
        ctx.fill();
        ctx.stroke();
        
        ctx.font = "bold 16px sans-serif";
        ctx.fillStyle = "#000";
        ctx.textAlign = "end";
        var label = "CANVAS";
        ctx.fillText(label, c.width * 0.4, c.height / 2);
        
        svgCircle.setAttribute("cx", c.width / 2);
        svgCircle.setAttribute("cy", c.height / 2);
        svgCircle.setAttribute("r", r);
    }
    
    //requestAnimationFrame(checkSize);
}

//requestAnimationFrame(checkSize);

window.addEventListener("resize", checkSize);

checkSize();