Clear canvas and requestAnimationFrame

I'm having trouble clearing the canvas on click. it seems to hold the value in the requestAnimationFrame so puts everything back.

What am i missing?

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);
}