JSFiddle - React, Tailwind, and code Playground

by hideki_a

HTML

<canvas id="test" width="500" height="200"></canvas>

CSS

canvas{
margin:10px;
}

JavaScript

function canvasApp() {
    var test,
        context,
        speed,
        arcs,
        nArcs;

    test = document.getElementById("test");
    context = test.getContext("2d");
    speed = 1;

    arcs = [
        {
            x: -40,
            y: 50,
            color: "#ED86B3"
        },
        {
            x: 0,
            y: 50,
            color: "#FFF000"
        },
        {
            x: 77,
            y: 50,
            color: "#00AFEC"
        },
        {
            x: 117,
            y: 50,
            color: "#9B308C"
        }
    ];
    nArcs = arcs.length;

    function drawScreen() {
        var i;

        context.clearRect(0, 0, test.width, test.height);
        context.strokeStyle = "#000000";
        context.strokeRect(0, 0, test.width, test.height);

        for (i = 0; i < nArcs; i += 1) {
            arcs[i].x += speed;
            if (arcs[i].x > 530) {
                arcs[i].x = -40;
            }

            context.globalAlpha = .75;
            context.fillStyle = arcs[i].color;
            context.beginPath();
            context.arc(arcs[i].x, arcs[i].y, 30, 0, Math.PI * 2, true);
            context.fill();
        }
    }

    setInterval(drawScreen, 33);
}

window.addEventListener("load", canvasApp, false);