Using Canvas with a React application to get frames from a video

Question

I'm using canvas for the first time and I'm having some difficulties getting canvas to capture the frame I'm aiming for. So as of now, I am only getting the top part of the screen. Apparently, canvas starts 0,0 at the top left corner of the video but I'm trying to capture an image of the bottom 4 pixels of the screen and the whole width of the screen. I will post the code that I have got so far, does someone know how to get the bottom row?

import './App.css';
import ReactHlsPlayer from 'react-hls-player';

function App() {
    // This function helps us with catching an image from the video stream.
    const capture = () => {
        const video = document.querySelector('video');
        const canvas = document.querySelector('canvas');
        const ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    };
    return (
        <div className="App">
            <ReactHlsPlayer
                id="video"
                src="my-url"
                autoPlay={true}
                controls={true}
                width="1920px"
                height="1080px"
            />
            {/* crop the bottom 4 pixels from the video and store as a image */}

            <canvas id="canvas" width="1920px" height="1076px"></canvas>
            <button className="button" onClick={capture}>
                Capture
            </button>
        </div>
    );
}

export default App;

bests, Benzo