how to move 2 object, one on the X axis and the other on the Y axis in Javascript?

Question

I am new to javascript, and I need to animate 2 squares of the same size using javascript, one moves on the Y-axis and another on the X-axis. when I run the code, they both go diagonally, what should I change?

I've tried to:

• create a different function of draw() for the blue rectangle, which resulted in the same problem
• make a drawBlueRectangle() function which draws the blue rectangle. nothing changed.

the two rectangles' code works fine separately

        var ctx = canvasObject.getContext("2d");

        var squareX = 200;
        var squareY = 150;
        var diffY = 5;
        var diffX = 5;
        var squareSize = 10;
        var WIDTH = 400;
        var HEIGHT = 300;
        
        function drawRect() {
            ctx.fillRect(0, 0, WIDTH, HEIGHT);
        }

        function drawSquare() {
            ctx.beginPath();
            ctx.fillRect(squareX, squareY, squareSize, squareSize);
        }
        
        function draw() {
            ctx.fillStyle = "white";
            drawRect();
            ctx.fillStyle = "red";
            drawSquare();
            
            if ((squareY + squareSize) >= HEIGHT)
                diffY = -diffY;
            if (squareY <= 0)
                diffY = -diffY;

            squareY = squareY + diffY;
            
            ctx.fillStyle = "blue";
            drawSquare();
            if ((squareX + squareSize) == WIDTH)
                diffX = -diffX;
            if (squareX <= 0)
                diffX = -diffX;

            squareX = squareX + diffX;
        }

        setInterval(draw, 30);

Answer 1

Just a small change, maintain separate x and y coordinate for both the rectangles so that the y-coordinate remain constant(to move on the x-axis) and the same for the other one. Here's the updated code

var ctx = canvasObject.getContext("2d");

    var squareX = 100;
    var squareY = 50;
    var squareX1 = 100;
    var squareY1 = 50;
    var diffY = 5;
    var diffX = 5;
    var squareSize = 10;
    var WIDTH = 400;
    var HEIGHT = 300;
    
    function drawRect() {
        ctx.fillRect(0, 0, WIDTH, HEIGHT);
    }

    function drawSquare() {
        ctx.beginPath();
        ctx.fillRect(squareX, squareY, squareSize, squareSize);
    }
    function drawSquare1() {
        ctx.beginPath();
        ctx.fillRect(squareX1, squareY1, squareSize, squareSize);
    } 
    function draw() {
        ctx.fillStyle = "black";
        drawRect();
        
        ctx.fillStyle = "red";
        drawSquare();
        if ((squareY+squareSize) > HEIGHT-200)
            diffY = -diffY;
        if (squareY <= 0)
            diffY = -diffY;

        squareY = squareY + diffY;
        
        ctx.fillStyle = "blue";
        drawSquare1();
        if ((squareX1 + squareSize) > WIDTH-200)
            diffX = -diffX;
        if (squareX1 < 0)
            diffX = -diffX;
            
        squareX1 = squareX1 + diffX;
        
    }

    setInterval(draw, 30);

Answer 2

If you pass in the coordinates to draw the rectangle into the drawSquare function, then the same code can be used to draw squares in different locations.

const canvasObject = document.getElementById("cvs");
const ctx = canvasObject.getContext("2d");
const squareSize = 10;
const WIDTH = 400;
const HEIGHT = 300;

let squareX = 200;
let squareY = 150;
let diffY = 5;
let diffX = 5;

function drawSquare(x, y) {
    ctx.fillRect(x, y, squareSize, squareSize);
}

function draw() {
    // Draw background
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, WIDTH, HEIGHT);
    
    // Move squares and handle edge collisions
    squareY = squareY + diffY;
    squareX = squareX + diffX;
    if (((squareY + squareSize) >= HEIGHT) || (squareY <= 0)) { diffY = -diffY; }
    if (((squareX + squareSize) >= WIDTH) || (squareX <= 0)) { diffX = -diffX; }
    
    ctx.fillStyle = "red";
    drawSquare(WIDTH / 2, squareY);
    
    ctx.fillStyle = "blue";
    drawSquare(squareX, HEIGHT / 2);
}

setInterval(draw, 30);

<canvas id="cvs" width="400" height="300"></canvas>