Canvas problem with clearRect() and drawImage() synchronization?

I have come to a small problem and conclusion while playing around with canvas functions.

Here is my class calling the methods:

        this.clear();

        // Some code ...

        // Seems like 25 ticks is the minimum to render after clear..
        // changing it back and forth from 25 to 30 will skip it for some reason.
        setTimeout(() => this.draw(), 30);

If setTimeout() is not specified and or < 25 ticks, this.draw() will result in no draw.

Here are my class methods:

     clear()
     {
        this.ctx.clearRect(
            this.xPos
            , this.yPos
            , this.source.width + this.scaleWidth
            , this.source.height + this.scaleHeight
        );
     }
     draw()
     {
        this.ctx.drawImage(this.source
            // Source Position
            , 0
            , 0
            // Source Size
            , this.source.width
            , this.source.height
            // Destination Position
            , this.xPos
            , this.yPos
            // Destination Size
            , this.source.width + this.scaleWidth
            , this.source.height + this.scaleHeight
        );
    }

Now I am aware of the window.requestAnimationFrame(), but as this is a one time deal,
I was kind of confused since I thought the code was running in a synchronized way..?

Note: If I am to change the setTimeout() from 25 to 30, the first time it runs, it will fail to draw. Refreshing that same page will make it work for some kind of magical reason.