canvasで、動画から毎秒15フレーム切り出したい

Question

canvasに動画を表示し、毎秒15フレームのデータを切り出したいです。

video elementのcurrentTimeに時間を代入->描画->データ取得

という流れでコードを書きました。以下のコードは一応動作するのですが、下から7行目で1ミリ秒待っています。
この部分が無いとcanvasに描画されないのですが、ここで待たなければいけない理由がわかりません。ctx.drawImage()は、非同期実行なのでしょうか。そうだとすれば、どのようなイベントで描画が完了したことがわかりますでしょうか。

const width = 800;
const height = 600;

const canvas = document.getElementsByTagName("canvas")[0];
const ctx = canvas.getContext("2d");
canvas.setAttribute("width", width);
canvas.setAttribute("height", height);

const videoElement = document.createElement("video");
videoElement.src = "../video.mp4";


const awaitForTimeupdate = (target) => {
    return new Promise(resolve => {
        const listener = resolve;
        target.addEventListener("timeupdate", listener);
    });
};


async function wait(millisec) {
    await new Promise(resolve => setTimeout(resolve, millisec));
}

// 毎秒15フレーム
const FPS = 15;
const Frames = 100;//100フレーム取る
let nowTime = 0;


async function start(){
    
        for (let i = 0; i < Frames; i++) {
            await drawFrame();
　　　　　　//取得したデータ
            console.log(ctx.getImageData(0, 0, canvas.width, canvas.height).data);

            //nowTimeのアップデート
            nowTime = (i / FPS)*1000;//[ms]
        }


    async function drawFrame(){
        ctx.clearRect(0,0,canvas.width,canvas.height);

        //currentTimeに代入
        videoElement.currentTime = nowTime/1000;

        await awaitForTimeupdate(videoElement);
        
        ctx.drawImage(videoElement, 0,0,canvas.width,canvas.height);

        //ここです
        await wait(1);
    }
}

document.querySelector("#start").addEventListener("click",()=>{
    start();
});

Answer 1

MDNに書いてある以下の注意点に引っかかっているのではないでしょうか。

drawImage() only works correctly on an HTMLVideoElement when its HTMLMediaElement.readyState is greater than 1 (i.e., seek event fired after setting the currentTime property).

Comments

[takushikai]

回答ありがとうございます。ご指摘にあったreadyStateを確認したところ、drawImageの直前の時点でreadyStateは3や4といった値になっているので1より大きいです。また、イベントリスナーの部分のtimeupdateをseekedに変えましたが、表示されないのは変わりませんでした。
ほかの原因は考えられますでしょうか。

[takushikai]

【追記】
canvasに表示はされていませんが、データは取得できておりましたので解決とさせていただきます。
int32_t様　回答ありがとうございました。