for a project, I need to make, using ctx, a square that starts from a random y (35 or 105), moves from y = 0 to the end of the canvas, and gets back to the beginning, once again, 35 or 105 randomly.

It needs to move at 20 pixels every frame.

I created a function that draws a square:

function drawSquareBlue() {
            ctx.beginPath();
            ctx.fillRect(squareX, squareY, squareSize2, squareSize2);
        }

then, in the main function, I tried to start the code that moves the square:

if (squareX <= 0)
            diffY = -diffY;
            squareX = squareX + diffY;

And I didn't know what to do next. I tried setting squareX to 0, but the square gets stuck. I also don't know what to do for it to run at 20pixels/frame