Блог

У меня возникли проблемы с очисткой холста по щелчку. кажется, что он содержит значение в requestAnimationFrame, поэтому возвращает все обратно.

Чего мне не хватает?

 const canvas = document.querySelector("canvas");
canvas.width = window.innerWidth * 2;
canvas.height = window.innerHeight * 2;

canvas.style.width = window.innerWidth   "px";
canvas.style.height = window.innerHeight   "px";

const ctx = canvas.getContext("2d");
const video = document.querySelector("video");
var myReq;


document.addEventListener("click", (event) => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    video.src = event.target.dataset.vid;
    window.cancelAnimationFrame(myReq);
    console.log("myReq", myReq)
    animate(event)
})

document.addEventListener('mousemove', (event) => {
    animate(event)
})


function animate(event) {
     function step() {
        ctx.drawImage(video, event.pageX, event.pageY, 660, 360)
        myReq = window.requestAnimationFrame(step)
    }
    myReq = window.requestAnimationFrame(step);
}