Canvas. Как остановить анимацию кнопкой?
 

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

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 но что-то не вышло . Помогите , пожалуйста, кто разбирается.

chegevika,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

chegevika,
кнопка стоп должна останавливать requestAnimationFrame
читать про cancelAnimationFrame и тут Использование requestAnimationFrame