В setInterval не работает ctx.clearRect

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var ball = {
  x: 150,
  y: 400
}

ball.draw = function() {
  ctx.arc(ball.x, ball.y, 10, Math.PI * 2, false);
  ctx.stroke();
  ctx.fill();
}

ball.move = function() {
  ball.y -= 2
}

ball.checkInterval = function() {
  if (ball.y < 150) {
    clearInterval(animation);
  }
}

var animation = setInterval(function() {
  ctx.clearRect(0, 0, 300, 400);
  ball.checkInterval();
  ball.draw();
  ball.move();
  ctx.strokeRect(0, 0, 300, 400)
}, 30)
<canvas id="canvas" width="300" height="400"></canvas>


Ответы (1 шт):

Автор решения: entithat

Добавил ctx.beginPath(). Как уже сказали, этот метод начинает новый или сбрасывает текущий путь.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var ball = {
  x: 150,
  y: 400
}

ball.draw = function() {
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, 10, Math.PI * 2, false);
  ctx.stroke();
  ctx.fill();
}

ball.move = function() {
  ball.y -= 2
}

ball.checkInterval = function() {
  if (ball.y < 150) {
    clearInterval(animation);
  }
}

var animation = setInterval(function() {
  ctx.clearRect(0, 0, 300, 400);
  ball.checkInterval();
  ball.draw();
  ball.move();
  ctx.strokeRect(0, 0, 300, 400)
}, 30)
<canvas id="canvas" width="300" height="400"></canvas>

→ Ссылка