canvas screenコンポーネント利用時に，試行を移動せずに（刺激画面を書き換えずに）canvasに要素を追加したい場合があります。例えば，正しいボタンが押されるまで反応を受け付ける場合には，誤ったボタンを押した際に画面上に「×」と表示しなければ，参加者に反応が誤答であることを理解してもらえないでしょう。Fキーが誤答とした場合に以下のコードで，Fを入力した際に×を表示することができます。動作としては，canvasを取得し，その取得したcanvasに文字を描画しています。

//before:prepareに配置
this.options.events['keydown'] = function(e) {
  if(e.key == "f"){
		//誤答を記録
    this.data.correct = "incorrect";
    //×を表示する
    const canvas = this.options.el.querySelector('canvas');
    const ctx = canvas.getContext("2d");
    ctx.font = "40px 'sans-serif'";
    ctx.textAlign = "center"
    ctx.fillStyle = "red";
    ctx.fillText("×", 0, -50); 
  }
}

ここで詰まるところは，既に存在しているcanvasの取得だと思われますので，あとはcanvasを自由に書き替えられるはずです。なお，実際に実験として動かすには，以下のように正答キーの際にコンポーネントを終了するというコードも書く必要があります（サンプルコードはJキーが正答キーの場合）。

//before:prepareに配置
this.options.events['keydown'] = function(e) {
  //キーに応じた応答
	if(e.key == "j"){
    //正答を記録
    this.data.correct = "correct";
		//コンポーネントを終了
    this.end();
	}
  else if(e.key == "f"){
		//誤答を記録
    this.data.correct = "incorrect";
    //×を表示する
    const canvas = this.options.el.querySelector('canvas');
    const ctx = canvas.getContext("2d");
    ctx.font = "40px 'sans-serif'";
    ctx.textAlign = "center"
    ctx.fillStyle = "red";
    ctx.fillText("×", 0, -50); 
  }
}

©2020 Masanori Kobayashi