JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

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

            ctx.fillStyle = 'red';

            var startTime;
            var interval = 1000;

            requestAnimationFrame(animate);

            function animate(t) {
                requestAnimationFrame(animate);
                if (!startTime) {
                    startTime = t;
                }
                if (t - startTime < interval) {
                    return;
                }
                startTime = t;
                draw();
            }

            function draw() {
                var X = Math.floor(Math.random() * canvas.width);
                var Y = Math.floor(Math.random() * canvas.height);
                var radius = 70;

                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.beginPath();
                ctx.arc(X, Y, radius, 0, 2 * Math.PI, false);
                ctx.fill();
            }