以下の「Canvasリファレンス」が大変便利です。
キャンバス API (Canvas API) は, <canvas>
要素によってグラフィックを描く方法です。他にも,アニメーション,ゲームのグラフィック,データの可視化,写真加工,リアルタイム動画処理などに使用することができます。
これまでのチュートリアルでは,出来るだけコードを書かないことを目標としてきましたが,視覚探索課題のように図形をランダムに配置する場合や,注視点から円形に図形を配置する場合には,コードを用いた方が便利です。
「lab.js」では「Scripts」のタブに切り替えることで,「Content」に描画する内容をコードで指定することが出来ます。また,ここで描いた図形の関数を制御するためには,「JavaScript」の知識も必要です。
「Builder」で文字を表示するには「Content」のタブに入力をしていきますが,「Canvas」のコードをそのまま入力するためには「Scripts」のタブに変えて入力していきます。
「title」は「draw」に,その横の「event」は**「before:prepare」**に変更してください。
↑ before:prepare に変える点がとても重要です。
「Script」に以下の関数を描き,その中に描画に関するCanvasの関数を追加することで「Content」に刺激を描画することが出来ます。インターネット上の「Canvas」に関するチュートリアルではCanvasをHTMLの中に埋め込む部分から説明がされていると思いますが,「lab.js」は,自動的にCanvasを作ってくれていますので,新たに作る必要はありません。