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,
    k = 1,
    w = (widthCanvas / counter) - 1,
    h = (heightCanvas / counter) - 1;

function step() {
    setTimeout(function(){
        if (j > h || j < 0) {
            k = -k;
            i = i + 1;
            j = j + k;
        }
        if (i > w) return;
        
        requestAnimationFrame(step);
        
        ctx.fillRect(i * counter, j * counter, counter, counter);
        j += k;
    }, 10);
}

step();