JSFiddle - React, Tailwind, and code Playground

by mithun

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');

        var drawAngledLine = function(x, y, length, angle) {
            var radians = angle / 180 * Math.PI;
            var endX = x + length * Math.cos(radians);
            var endY = y - length * Math.sin(radians);

            ctx.beginPath();
            ctx.moveTo(x, y)
            ctx.lineTo(endX, endY);
            ctx.closePath();
            ctx.stroke();
        }

        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";

        drawAngledLine(200, 200, 150, 0);
        drawAngledLine(200, 200, 150, 120);
        drawAngledLine(200, 200, 150, -120);
    } else {
        // Fallback code goes here
    }
}
drawCircleByThree();