JSFiddle - React, Tailwind, and code Playground

by devhammer

HTML

<canvas id="myCanvas" width="500" height="500">
    <p>Canvas not supported.</p>
</canvas>

CSS

* {
    margin: 0; padding: 0;
}
html, body {
    height: 100%; width: 100%; background-color: #000;
}
canvas {
    display: block;
}

JavaScript

$(document).ready(function() {
    var canvas = $("#myCanvas").get(0);
    var context = canvas.getContext("2d");
    var startAngle = 0.25;
    var endAngle = 1.75;
    var gapClosing = true;
    var posX = 0;
    var posY = 75;

    function renderGrid(gridPixelSize, color) {
        context.save();
        context.lineWidth = 0.5;
        context.strokeStyle = color;

        // horizontal grid lines
        for (var i = 0; i <= canvas.height; i = i + gridPixelSize) {
            context.beginPath();
            context.moveTo(0, i);
            context.lineTo(canvas.width, i);
            context.closePath();
            context.stroke();
        }

        // vertical grid lines
        for (var j = 0; j <= canvas.width; j = j + gridPixelSize) {
            context.beginPath();
            context.moveTo(j, 0);
            context.lineTo(j, canvas.height);
            context.closePath();
            context.stroke();
        }

        context.restore();
    }

    function setAngles() {
        if (startAngle <= 0) gapClosing = true;
        else if (startAngle > 0.25) gapClosing = false;

        if (gapClosing) {
            startAngle = startAngle + 0.05;
            endAngle = endAngle - 0.05;
        }
        else {
            startAngle = startAngle - 0.05;
            endAngle = endAngle + 0.05;
        }
    }

    function renderContent() {
        context.save();
        renderGrid(20, "red")
        context.beginPath();
        context.fillStyle = "Yellow";
        context.strokeStyle = "Yellow";
        context.arc(posX, posY, 50, startAngle * Math.PI, endAngle * Math.PI);
        context.lineTo(posX, posY);
        context.stroke();
        context.fill();
        context.restore();
    }

    function animationLoop() {
        canvas.width = canvas.width;
        renderContent();
        setAngles();
        posX += 5;
        if (posX > 500) posX = 0;
        setTimeout(animationLoop, 33);
    }

    animationLoop();
});