1. 四角形の描画

四角形の描画に関連するのは「fillRect(x, y, w,h)」メソッドです。最初の２つの座標は四角形の左上の座標です。「Builder」の四角形の場合は図形の中心の座標ですので注意が必要です。３つ目と４つ目の引数は幅と高さです。四角形の塗りつぶしには「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 //高さ
  )
}

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

画面中央に表示したい場合には，四角形の左上の座標を「-50, -50」としてください。

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

デモ

以下がデモです。

Experiment

完成版の「study.json」ファイル

以下のファイルを右クリックでダウンロードしてください。このファイルをBuilderで読み込めば，実験プログラムを確認することが出来ます。

左側のメニューのフロッピーアイコンの▼をクリック→ Open で以下のファイルを指定

draw_demo2-2020-04-29--14_25.study.json

追記

以下のように，変数で指定してしまった方が良いのかもしれません。

// 色を指定
  ctx.fillStyle = "blue";

  // 大きさを指定
  var rect_width = 100;
  var rect_height = 100;

  // 四角形を描画
  ctx.fillRect(
    -rect_width/2,// 左上のx座標
    -rect_height/2,// 左上のy座標
    rect_width,// 幅
    rect_height //高さ
  )