Canvas beginPath() не очищает прямоугольник перед каждым кадром

Question

Я хочу анимировать прямоугольник на холсте. Технически это работает, но холст не очищается перед каждым кадром и оставляет след на земле (вроде как улитка). Я провел исследование, и все, кажется, указывает на использование ctx.beginPath() как решение моей проблемы, но когда я пытаюсь использовать это здесь, это не работает. Что я делаю неправильно?

Вот сырой JavaScript:

// create a canvas element
var canvas = document.createElement("canvas");

// attach element to DOM
document.getElementsByTagName("body")[0].appendChild(canvas);

// get the canvas context (this is the part we draw to)
var ctx = canvas.getContext("2d");
var bug = new Bug(0,0);

function setup() {
  // setup the canvas size to match the window
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  // set the 0,0 point to the middle of the canvas
  ctx.translate(canvas.width / 2, canvas.height / 2);
}

function draw() { //Do the drawing
  ctx.beginPath();
  bug.update();
  bug.draw();
  window.requestAnimationFrame(function(){draw()});
}

// start enterFrame loop
window.requestAnimationFrame(draw);

// force running setup
setup();

// re-setup canvas when the size of the window changes 
window.addEventListener("resize", setup);

// sin(pi) == 0
// cos(pi) == -1
// sin(2pi) == 0
// cos(2pi) == 1
// degrees to radians: {{ deg * (pi/180) = rad }}

function randomRange(max, min) {
  return Math.floor(Math.random() * (max - min) + min);
}

function Bug(x, y) {
  this.x = x;
  this.y = y;
  this.jitter = 10;
  this.speed = 1;
  this.deg = 0;
  this.rad = 0;
  this.update = function() {
    //update degrees
    this.deg += randomRange(this.jitter, -this.jitter);
    //convert degrees into radians
    this.rad = this.deg * (Math.PI/180);
    //update coordinates
    this.x += this.speed * (Math.cos(this.rad));
    this.y += this.speed * (Math.sin(this.rad));
  };
  this.draw = function() {
    ctx.beginPath();
    ctx.rect(this.x, this.y, 50, 50);
    ctx.fill();
  };
}

Answer 1

Функция beginPath не очищает экран, она начинает рисовать путь, чтобы очистить экран, вы должны использовать clearRect, а в вашей конкретной ситуации вы должны использовать:

ctx.clearRect(-canvas.width, -canvas.height, canvas.width*2, canvas.height*2);