drawImage関数を使うことで画像を表示することが出来ますが,なかなか一筋縄ではいきません。Image() コンストラクタを使用して,最初に読み込みを行い,drawImageで表示するという2ステップが必要です。
次は「Image」を表示する方法です。まずは,「Files」に画像をアップロードしてください。
(画像は小林先生のチュートリアルのリンゴの画像です。)。
まずは,以下のようにImage() コンストラクタを使用して,最初に読み込みを行います。「options.content」での描き方ですと「src」に入力していましたが,それと同じことを以下のように実行します。「this.files[XXX]」で,画像を読み込みます。
const stim_img = new Image();
stim_img.src = this.files["1.jpg"];
以下のクイックリファレンスも参考にしてください。
drawImage(image, dx, dy)-Canvasリファレンス
drawImageでは,先ほど指定したファイルを指定します。位置は中央寄せはしてくれないので,画像の幅と高さ(400*250)の半分の大きさだけずらします。
const stim_img = new Image();
stim_img.src = this.files["1.jpg"];
this.options.renderFunction = (t, canvas, ctx, obj) => {
// このレンダー関数を使うことでcanvasに図形を描くことが出来ます。
// t: timestamp この関数が呼び出された時刻
// canvas: canvasオブジェクトへのレファレンス
// ctx: 描画するコンテンツの情報(一番重要)
// obj: 現在描画されているcanvasへの参照
// 以下を描き変えてください。-------------------------------
ctx.drawImage(stim_img,-200, -125);
}
実行すると以下のように表示されます。
以下がここまでのプログラムファイルです。