1. 文字の描画

文字の描画に関連するのは「fillText(text, x, y, [maxWidth])」メソッドです。最初の「text」には描画する文字列，２つ目と３つ目の引数はキャンバス内の座標です。この座標は，「lab.js」の座標軸に変換されています。「0,0」がキャンバスの中央の座標となりますので注意が必要です。

「lab.js」では描画領域として幅：800px で，高さ：600pxが設定されています。つまり，座標の取りうる範囲は「幅：-400~400」，「「高さ：-300~300」となります。最後の引数は文字の描画領域の最大幅です。最大幅を指定すると、テキストがその中に収まるように縮められるようです。

定番ですが以下の文章を呈示してみましょう。「fillText」の前に「ctx」をつけます。

// 文字を描画
  ctx.fillText(
    'Hello world', // 文字
    0,// x座標
    0,// y座標
    400// テキスト描画領域の最大幅
  )

さらに，文字のフォントと色を指定しましょう。「fillText」の前に指定してください。

// 文字の情報を指定
  ctx.fillStyle = "blue";
  ctx.font = "60px 'ＭＳ ゴシック'";

  // 文字を描画
  ctx.fillText(
    'Hello world', // 文字
    0,// x座標
    0,// y座標
    400// テキスト描画領域の最大幅
  )

これを，「renderFunction」関数の中に書くとこんな感じです。

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

  // 以下を描き変えてください。-------------------------------
  
  // 文字の情報を指定
  ctx.fillStyle = "blue";
  ctx.font = "60px 'ＭＳ ゴシック'";

  // 文字を描画
  ctx.fillText(
    'Hello world', // 文字
    0,// x座標
    0,// y座標
    400// テキスト描画領域の最大幅
  )
}

実験画面に図形を表示する

それでは，実験を実行してみましょう。左上の実行ボタンを押してください。「Hello world」の文字が画面に表示され，そのまま停止したと思います。確認したらウィンドウを閉じてください。

これで，画面に刺激（文字）を描画することが出来るようになりました。

デモ

以下がデモです。

Experiment