[chegevika]

Всем привет. Я начинающий) Как остановить движение анимации в канвас? создала квадрат, который при нажатии на кнопку движется вперед-назад по канвасу. Другая кнопка должна его остановить. Мои варианты были такие:

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


let n=2; //скорость
let x = 10;
let y = 10;


function draw(x,y) {
ctx.fillStyle = 'green';
ctx.fillRect(x,y,50,50);
}

draw(x,y); // чтоб квадрат был всегда нарисован на экране


let move_sqare = document.querySelector("#startBtn");
move_sqare.addEventListener("click", function move () {

ctx.clearRect(0,0, canvas.width, canvas.height)
draw(x,y);
x += n;
if (x > canvas.width-50 || x < 0) {
n = -n
}

requestAnimationFrame(move)
});


let stop_sqare = document.querySelector("#stopBtn");
stop_sqare.addEventListener("click", function stopmove () {
ctx.clearRect(0,0, canvas.width, canvas.height)
draw(x,y);
n = 0;
x += n;

});

Элемент останавливается, но больше кнопки не работают =(( Еще пыталась с cancelAnimationFrame но что-то не вышло . Помогите , пожалуйста, кто разбирается.