Когда я прокручиваю вправо или влево на HTML-холсте, я получаю изображения следов, почему?

Question

Когда я перемещаюсь влево или вправо на холсте, я начинаю получать эффект этих следов.Мне нужно, чтобы он был красиво отрисован, как в центре холста.Я использую функцию translate (), чтобы переместить фон в сторону.Я также попробовал clearRect, но затем, когда я переместился вправо, я просто получил белый фон.Как это исправить?

var view = {x: 0, y: 0};

var mapArray = [
  [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
  [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
  [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
  [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0],
  [0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0],
  [0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
];

function render(viewport) {

  context.save();
  context.translate(view.x, view.y);



  requestAnimationFrame(render);
  var oldPosX = boatPosX;
  var oldPosY = boatPosY;


  for (let i = 0; i < mapArray.length; i++) {
    for (let j = 0; j < mapArray[i].length; j++) {

      if (mapArray[j][i] == 0) {
        this.sprite.draw(
          background,
          190,
          230,
          26,
          26,
          i * this.sprite.width,
          j * this.sprite.height,
          this.sprite.width,
          this.sprite.height
        );
      }
      if (mapArray[j][i] == 1) {
        this.sprite.draw(
          background,
          30,
          30,
          26,
          26,
          i * this.sprite.width,
          j * this.sprite.height,
          this.sprite.width,
          this.sprite.height
        );

      }
      if (mapArray[j][i] == 2) {
        this.sprite.draw(
          background,
          200,
          20,
          26,
          26,
          i * this.sprite.width,
          j * this.sprite.height,
          this.sprite.width,
          this.sprite.height
        );
      }
    }
  }
  this.ship.drawimage(boat, boatPosX, boatPosY, 50, 50);


  if(isPositionWall(boatPosX + 36, boatPosY)) {
    boatPosX = oldPosY;
    console.log("collision");
  }

  context.restore();

};

function move(e) {
  if (e.keyCode == 39) {
    boatPosX += 5;
    view.x -= 5
    moveCount++;
    console.log(moveCount);
    console.log("right");
  }

Answer 1

Два варианта: либо стереть предыдущее изображение, либо очистить весь холст, используя context2d.clearRect

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect

Answer 2

Любой пиксель, который вы не перерисовываете, останется неизменным.Поэтому, когда вы перемещаете лодку, но ничего не рисуете в пикселях, где лодка была последним кадром, эти пиксели будут продолжать отображать пиксель этой лодки.

Вам необходимо перерисовать эти пиксели.Либо используйте fillRect с fillStyle, установленным на синий цвет фона, либо рисуйте полноразмерное фоновое изображение в каждом кадре.

ctx.fillStyle = "#60A0D8";
ctx.fillRect(0, 0, view.x, view.y);

Сделайте это, прежде чем рисовать что-либо еще.