Почему отображается только один объект?

Question

[Conan_Doyle]

Есть шарики они должны отскакивать от стен, но появился только один шарик.

Пишу с телефона тут нету выбора написания текста, поэтому вставлю код так:

spoiler

$(function() {
    var canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var
        ctx = canvas.getContext("2d"),
        dx = 4,
        dy = 4,
        arrp = [];

    for (i = 0; i < 5; i++) {
        var rx = Math.random() * canvas.width;
        var ry = Math.random() * canvas.height;
        var r = 30;
        var ball = new Particle(rx, ry, r);
        arrp.push(ball);
    }


    var n;

    var loop = function() {
        requestAnimationFrame(loop);
        for (var s = 0; s < 5; s++) {
            n = arrp[s];
            n.update();
        }
    }
    loop();




    function Particle(x, y, r) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.dx = 7;
        this.dy = 7;




        this.draw = function() {
            ctx.beginPath();
            ctx.clearRect(0, 0, innerWidth, innerHeight);
            ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
            ctx.fillStyle = "blue";
            ctx.fill();

            if (this.x + this.r > innerWidth || this.x - this.r < 0) {
                this.dx = -this.dx;
            }
            if (this.y + this.r > innerHeight || this.y - this.r < 0) {
                this.dy = -this.dy;
            }
            this.x += this.dx;
            this.y += this.dy;
        }
        this.update = function(p) {
            this.draw();
        }

    }

});

Answer 1

[0xD34F]

Потому что в методе draw вы полностью очищаете холст перед рисованием объекта, соответственно, увидеть можно только последний. Холст очищать надо один раз - перед тем, как начнёте обходить в цикле объекты для их обновления.