Canvas [почему изображение на канвасе не изменяется?]

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

Прорисовку сделал на канвасе, но почему что функция SetInterval рисует только 1 раз. Подскажите, что делаю не так?

let canvas = document.getElementById("canvas");

let ctx = canvas.getContext("2d");

let x1 = Math.random() * 400;

let y1 = Math.random() * 400;

let w = 50

let h = 50

function draw() {

  ctx.beginPath();

  ctx.clearRect(0, 0, 600, 600)

  ctx.fillStyle = "red";

  ctx.fillRect(x1, y1, w, h);

}

function ttt() {

  setInterval(() => draw(), 1000)

}

ttt()

Привет! Рисует все время, как и положено, раз в секунду +/-. x1 и y1 не меняются при вызове draw(). Как ты х определил, так в переменных и присвоены. Перенеси расчет x1 и y1 в функцию draw().

1 лайк