JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<button id="red">Show Red for 0.75 seconds</button><br>
<button id="blue">Show Blue for 1.50 seconds</button><br>
<canvas id="canvas" width=300 height=300></canvas>

CSS

body {
    background-color: ivory;
}
canvas {
    border:1px solid red;
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var circles = {};
circles.red = ({
    x: 100,
    y: 100,
    radius: 25,
    color: "red",
    visibleDuration: 750,
    visibleCountdown: 0
});
circles.blue = ({
    x: 175,
    y: 150,
    radius: 20,
    color: "blue",
    visibleDuration: 1500,
    visibleCountdown: 0
});

var startTime = lastTime = performance.now();

animate();

function animate(currentTime) {

    requestAnimationFrame(animate);

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    var elapsed = currentTime - lastTime;
    lastTime = currentTime;

    for (var i in circles) {
        var circle = circles[i];
        circle.visibleCountdown -= elapsed;
        if (circle.visibleCountdown > 0) {
            drawCircle(circle);
        }
    }
}

function drawCircle(circle) {
    ctx.globalAlpha = circle.visibleCountdown / circle.visibleDuration;
    ctx.beginPath();
    ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fillStyle = circle.color;
    ctx.fill();
    ctx.globalAlpha = 1.00;
}

function showCircle(circle) {
    circle.visibleCountdown = circle.visibleDuration
}

$("#red").click(function () {
    showCircle(circles["red"]);
});

$("#blue").click(function () {
    showCircle(circles["blue"]);
});