JSFiddle - React, Tailwind, and code Playground

by balefrost

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%" dominant-baseline="middle">SVG</text>
</svg>

CSS

body {
    margin: 0;
    overflow: hidden;
}

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

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

JavaScript

var width = 0;
var height = 0;

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

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

window.addEventListener("resize", checkSize);

checkSize();