JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="viewport"></canvas>

JavaScript

var doc     = document;
var canvas  = doc.getElementById('viewport');
var ctx     = canvas.getContext('2d');

var settings = {
    area : { 
        height  : 100, 
        width   : 100
    }
};
canvas.width  = settings.area.width;
canvas.height = settings.area.height;

function draw() {
    for (var i = 10; i--;) {
        var x = Math.floor(Math.random() * 1000)
        var y = Math.floor(Math.random() * 1000)
        
        ctx.beginPath();
        ctx.arc(x, y, 3, 0, Math.PI * 2, true);
        ctx.fillStyle = "yellow";
        ctx.closePath();
        ctx.fill();
    }
}

function gameLoop (render, element) {
    var running, lastFrame = +new Date;
    function loop( now ) {
        // stop the loop if render returned false
        if ( running !== false ) {
            requestAnimationFrame( loop, element );
            running = render( now - lastFrame );
            lastFrame = now;
        }
    }
    loop( lastFrame );
}

gameLoop (function (deltaT) {
        
    draw();
    
}, canvas );