MDN web docs

以下は公式のSlackでも紹介されているCanvasのチュートリアルです。

Canvas チュートリアル

Basic Example を再現

他のCanvasのチュートリアルのデモプログラムをlab.jsで試す時に，どの部分をScriptsタブに書き込めば良いのか迷うと思います。lab.js builderでは，「canvas」は新しく作る必要はありません。そのため，HTMLタグ内にcanvasを指定するプロセスは必要ありません。

例えば，以下の部分は必要ありません

<canvas id="canvas"></canvas>

また，以下のようにHTML内への参照として，「Document.getElementById()」を使ったり，背景を取得するために「HTMLCanvasElement.getContext()」を使ったりする必要もありません。参考にできるのは赤くマーカーされた部分だけです。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);

この赤いマーカーの部分を以下のように「renderFunction」内に記入すれば同じように図形が表示されます。

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

ただし，注意事項として，lab.js Builder内では座標を画面の中心に設定し直しているので，画面の中心付近に図形が表示されます。

他のデモも同じようにlab.js Builder 上で動かしてみてください。