1. 復習：Scriptsの準備

「Builder」で文字を表示するには「Content」のタブに入力をしていきますが，「Canvas」のコードをそのまま入力するためには「Scripts」のタブに変えて入力していきます。

「title」は「draw」に，その横の「event」は**「before:prepare」**に変更してください。

↑ before:prepare に変える点がとても重要です。

2. 復習：図形を描画するには

「Script」に以下の関数を描き，その中に描画に関するCanvasの関数を追加することで「Content」に刺激を描画することが出来ます。インターネット上の「Canvas」に関するチュートリアルではCanvasをHTMLの中に埋め込む部分から説明がされていると思いますが，「lab.js」は，自動的にCanvasを作ってくれていますので，新たに作る必要はありません。

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

「renderFunction」の中で重要になるのは「ctx」と「t」の部分です。「ctx」が描画に関連します。また，「t」の部分で時刻の情報を取ってくることができます

3.四角形を呈示してみよう

3.1. 四角形の描画

四角形の描画に関連するのは「fillRect(x, y, w,h)」メソッドです。

最初の２つの座標は四角形の左上の座標です。３つ目と４つ目の引数は幅と高さです。四角形の塗りつぶし色には「fillstyle」が適用されます。

　// 色を指定
  ctx.fillStyle = "blue";
  // 四角形を描画
  ctx.fillRect(
    0,// 左上のx座標
    0,// 左上のy座標
    100,// 幅
    100 //高さ
  );

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

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

  // 以下を描き変えてください。-------------------------------
  
 // 色を指定
  ctx.fillStyle = "blue";
  // 四角形を描画
  ctx.fillRect(
    0,// 左上のx座標
    0,// 左上のy座標
    100,// 幅
    100 //高さ
  );
}

分かりにくいですが，画面中央よりも右下にずれて表示されます。位置の座標が四角形の左上の座標に対応しているためです。