Очистить холст перед рендерингом нескольких объектов на холсте

Question

У меня есть несколько объектов, отображаемых на холсте, каждый из которых слушает нажатие клавиши для направленного движения и перерисовывает с помощью requestAnimationFrame .

Проблема в том, что, если я установлю прозрачный холст на каждом из перерисовываемых объектов, будет несколько функций прозрачного холста, выполняющихся между различными перерисовками объектов, вызывающих мерцание объектов. Как лучше всего перерисовать (и очистить) несколько объектов на холсте.

function CreatePawn() {             
            var x = 25,
                y = 25;

            animate();

            function draw() {               
                ctx.clearRect(0, 0, cwidth, cheight);
                ctx.beginPath();
                ctx.lineWidth="3";
                ctx.arc(x, y, 2, 0, Math.PI * 2, true); // circle               
                ctx.stroke();               
            };

            function animate() {
                requestAnimationFrame( animate );
                if(left) x -= speed;
                if(up) y -= speed;
                if(right) x += speed;
                if(down) y += speed;
                draw();
            };

Answer 1

Я думал, что узнал эту функцию ...

Основная проблема заключается в том, что холст для вашей доски должен быть не частью объекта Pawn, а частью всеобъемлющего объекта Board.

Это этот объект, который должен обрабатывать события анимации, очищать себя и затем вызывать метод draw() каждой пешки, которому он должен передать соответствующий контекст.

Answer 2

Решение, которое работало для меня, состояло в том, чтобы запустить 1 глобальный setInterval (цикл времени), который сначала очистил бы canvas, а затем перерисовал все объекты, которые были помещены в массив.

У каждого объекта все еще может быть свой внутренний цикл времени для проверки изменений х / у, но перерисовка была до глобального setInterval.