ここまでの説明は「drawImage」を見てください。

画像「drawImage」

さて，今回のプログラムでもう一つ重要なのが，「this.queueAnimationFrame()」です。これでフレームごとに画面を描き変えます。

this.options.renderFunction = (t, canvas, ctx, obj) => {
  // 200ms ごとに画像を切り替え
  num = Math.floor(t/200);

  // このレンダー関数を使うことでcanvasに図形を描くことが出来ます。
  // t: timestamp この関数が呼び出された時刻
  // canvas: canvasオブジェクトへのレファレンス
  // ctx: 描画するコンテンツの情報（一番重要）
  // obj: 現在描画されているcanvasへの参照

  // 以下を描き変えてください。-------------------------------
  
  ctx.drawImage(stim_img[num%4+1],-200, -125);
  // 画面を書き換える
  this.queueAnimationFrame();
}

以下のように入力してください。

drawimage_demo4-2020-09-13--18 20.study.json

追記：画面のフレームレートについて

今回，時刻を取得して画面を切り替える方法を用いてますが，実際にはブラウザの更新タイミングで書き換えが行われます。ブラウザは標準的に60fpsで画面が更新されるようですので，実際にはそのタイミング（16.6ミリ秒の倍数）で刺激の呈示時間が変わっていることになるでしょう。