Почему элемент не передвигается по Y, а увеличивается по высоте?

Question

[dima89e]

const canvas = document.querySelector('#canvas'),
	ctx = canvas.getContext('2d')

let dinoY = 140;

function initCanvas() {
  canvas.width = canvas.clientWidth;
  canvas.height = canvas.clientHeight;
  ctx.fillStyle = 'lightgray';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

initCanvas();
window.onresize = initCanvas;

function draw() {
  ctx.fillStyle = 'green';
  ctx.fillRect(50, dinoY, 50, 70);
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 210, canvas.width, 1);

  requestAnimationFrame(draw);
}
draw();

function jump() {
  setInterval(() => {
    dinoY--;
  }, 0);
}

window.onkeydown = (e) => {
  jump();
};

Answer 1

[Alexandroppolus]

Если ты про зелёный прямоугольник, то в функции draw не стирается предыдущий, просто к нему дорисовывается новый. Надо делать ctx.fillStyle = 'lightgray'; и закрашивать, потом рисовать новый

Comments

[dima89e]

я с clearRect сделал

Answer 2

[dima89e]

Вообщем, разобрался, надо было clearRect прописать