How to make setInterval() interval work?

Question

JavaScript

There is a rather primitive code that should draw a 30x30 square at a random place on the canvas
a and b = a predefined random width and height.
But it works like this: a 30x30 square appears in a second and that's it. After 5 seconds, it executes a timeout with an alert.
How to make a new square appear every second before the expiration of 5 seconds?
function getRect() {
ctx.fillRect(a, b, 30, 30);
}
var timer;
timer = setInterval(() => getRect(), 1000);
setTimeout(() => {
clearInterval(timer);
alert('stop');
}, 5000);

Answer 1

I suspect that your square is drawn 5 times, but in the same place, because a and b do not change. And rename getRect() to drawRect()!

Answer 2

I understand that in 5 seconds, 5 squares should appear, 1 in one second. We have an interval of 1 second, we replace the iterations, if the iteration is greater than or equal to 5, we stop the interval.

var iteration = 1;
var timer = setInterval(function (){
    /* 
        рисуем квадрат
    */
    
    iteration++;
    if (iteration >= 5) clearInterval(timer);
}, 1000);