Why is toDataURL() returning blank image? (with p5 video)

Question

I'm using p5 to display a video with the webcam and send a picture of it when the user clicks a button (along with lat & lon cords). For some reason though, toDataURL() always returns a blank image but I want it to show a snapshot of the video. Here's what I have:

function setup() {            
    noCanvas();
    const video = createCapture(VIDEO);
    video.size(320,240);
    video.loadPixels();

    submit.addEventListener('click', async event => {
        position().then(({lat, lon}) => {
            const image = video.canvas.toDataURL();
            data(lat, lon, image);
        })
    })
}

submit is the button data() is the function I'm using to generate a json and send it to the server

I tried to move the .addEventListener() outside of setup() but it did not work