I am not sure how to put an animation and a shape in Web?

Question

The first shape is okay, but when I add the second, it doesn't play the first.

Answer 1

Do you have a code to share? Maybe someone can see the problem that way.

Answer 2

I do this,
window.onload = function() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

context.rect(50, 50, 200, 150);
context.stroke();
};

And it works, but when I add this,

window.onload = function() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var x = 10;
    var y = 5;

    function draw() {
        context.clearRect(0, 0, 600, 400);

        context.beginPath();
        context.rect(x, y, 40, 20);
        context.fillStyle="brown";
        context.fill();

        x += 10;
        if (x >= 600) {
            x = -100;
        }
    }
    setInterval(draw, 50);
}

The rectangle from the first part disappears

Answer 3

Yep, you clear your entire canvas.
You can add your
context.rect(50, 50...)
part to the second code after the clearRect line and it'll be there.