JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" style="border: solid 1px #000">
</canvas>

JavaScript

var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;

var canvas = document.getElementById("myCanvas"),
    ctx = canvas.getContext("2d"),
    widthCanvas = 500,
    heightCanvas = 200,
    widthBlockColor = 10,
    heightBlockColor = 10,
    counter = 10;

canvas.width = widthCanvas;
canvas.height = heightCanvas;

ctx.fillStyle = "#52B3D9";

var i = 0,
    j = 0;

function step() {
    setTimeout(function(){
        if(i <= widthCanvas / counter) {
            if(j <= heightCanvas / counter) {
                
                requestAnimationFrame(step);
                ctx.fillRect(i * counter, j * counter, 10, 10);
                console.log(i * counter + " " + j * counter);
                
                j++;
            }
            
            i++;
        }
    }, 500);
}

step();