Почему холст перестает очищать прямоугольник?

Question

Я пытаюсь анимировать простой объект на холсте, и он работает при запуске, но через некоторое время он перестает очищать прямоугольники и просто продолжает заполнять новые прямоугольники.По крайней мере, я думаю, что это перестает очищаться, может быть, это что-то ещеМожет кто-нибудь мне помочь?Там нет ошибок консоли.

var canvas = document.querySelector('canvas');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var c = canvas.getContext('2d');

var x=100;
function animate() {
    requestAnimationFrame(animate);
    c.clearRect(0,0,window.innerHeight,window.innerWidth);
    c.beginPath();
    c.fillRect(x,100,100,100);
    x+=2;
}
animate();

body{
    margin: 0;
}
canvas{
    background: orange;
}

<canvas></canvas>

Answer 1

Я добавлю это здесь только потому, что принятый ответ решил вашу проблему случайно.

Проблема в том, что вы изменили параметры clearRect;

Вы сделали:

c.clearRect(0,0,window.innerHeight,window.innerWidth);

Пока ответ был:

c.clearRect(0,0,window.innerWidth,window.innerHeight); 

Answer 2

Как отметил @ Al.G в комментарии, ваши параметры height и width инвертируются в вызове clearRect().Замена их c.clearRect(0, 0, window.innerWidth, window.innerHeight); решит проблему.

Я обычно очищаю с помощью canvas.width и canvas.height, а не свойств без холста, таких как window.innerWidth и window.innerHeight, поскольку свойства canvas всегда будутсоответствовать его измерениям, уменьшать зависимость от внешних / глобальных переменных и не требовать обдумывания.

var canvas = document.querySelector('canvas');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var c = canvas.getContext('2d');
var x = 100;

function animate() {
    requestAnimationFrame(animate);
    c.clearRect(0, 0, canvas.width, canvas.height);
    c.beginPath();
    c.fillRect(x, 100, 100, 100);
    x += 2;
}

animate();

body {
    margin: 0;
}
canvas {
    background: orange;
}

<canvas></canvas>