JSFiddle - React, Tailwind, and code Playground

HTML

<header>
        <h1>Circle/3</h1>
    </header>
    <nav>
    </nav>

    <div>
        <canvas id='mycanvas' width="400" height="400"></canvas>
    </div>

    <footer>

CSS

*{
            margin: 0;
            padding: 0;
        }
        
        body {
            text-align: center;
        }
        canvas {
            border: 4px solid #ccc;
            margin: auto;
            box-shadow: 0px 0px 5px #000;
            -moz-box-shadow: px 0px 15px #000;
            -webkit-box-shadow: 0 0 15px #000;
        }

JavaScript

function drawCircleByThree() {
            var can = document.getElementById('mycanvas');
            if(can.getContext) {
                var ctx = can.getContext('2d');
                
                ctx.fillStyle = "#BD1981";
                ctx.beginPath();
                ctx.arc(200, 200, 150, 0, Math.PI*2, true);
                ctx.closePath();
                ctx.fill();

                ctx.strokeStyle = "#FFC8B2";
                ctx.lineWidth = "2";
                ctx.beginPath();
                ctx.moveTo(200, 200);
                ctx.lineTo(100, 100);
                ctx.closePath();
                ctx.stroke();
                
                ctx.beginPath();
                ctx.moveTo(200, 200);
                ctx.lineTo(350, 200);
                ctx.closePath();
                ctx.stroke();
                
                ctx.beginPath();
                ctx.moveTo(200, 200);
                ctx.lineTo(100, 300);
                ctx.closePath();
                ctx.stroke();
                
                
            } else {
                // Fallback code goes here
            }
        }
        drawCircleByThree();