JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="Canvas" width="501" height="601"></canvas>

JavaScript

function run() {
    reevaluate();
    slowDraw();
};

var fixedcenteri;
var fixedcenterj;
var drawCommands = [];

function slowDraw(index) {
    index = index || 0;
    
    var drawCommand = drawCommands[index];
    
    if (drawCommand) {
        fixedcenteri = drawCommand.i;
        fixedcenterj = drawCommand.j;
        setTimeout(function () {
            draw();
            slowDraw(++index);
        }, 100);
    }    
}

function reevaluate(i, j) {

    var altura_imagem = 50;
    var largura_imagem = 40;

    for (var i = 0; i < altura_imagem; i++) {
        for (var j = 0; j < largura_imagem; j++) {

            fixedcenteri = i;
            fixedcenterj = j;

            drawCommands.push({i: i, j: j});

            // if I uncomment this I can see what I want, but...
            // alert(i+j);
        };
    };
};

function draw() {
    var elem = document.getElementById('Canvas');
    var cx = elem.getContext('2d');

    w = elem.width;
    h = elem.height;

    cx.fillStyle = "white";
    cx.fillRect(0, 0, w, h);

    cx.fillStyle = 'blue';
    cx.fillRect(fixedcenteri, fixedcenterj, 10, 10);
}

run();