【p5.js】canvasタグを任意の場所に表示させる

p5.jsで生成されるcanvasタグを任意の場所に表示させる方法について書きます。デフォルトのままでは都合が悪いので、コードを少し変更します。まずは、デフォルトの挿入位置を確認します。その後、対応コードを記述します。

canvasタグのデフォルトの挿入位置

p5.jsのデフォルトでは、bodyの閉じタグの直前にcanvasタグが挿入される。

...

<main><canvas></canvas></main>
</body>
</html>

任意の場所に表示したいので、コードを変更する。

canvasを任意の場所に表示

HTMLのid属性が書かれている場所に、canvasを表示するようにする。

<div id="result"></div>

//id属性で指定した要素を取得する
let result = document.getElementById('result');

function setup(){
  let canvas = createCanvas(200, 200);
  canvas.parent(result);  //canvasを指定した要素の子要素にする

  //以下、続きの処理
  ...
}

parent()メソッドは、p5.jsが持っているメソッド。詳しくは、リファレンスのDOMの項目にある「p5.Element」を参照。

表示例

マウスの動きに合わせて、円が動く。

まとめ

canvasを任意の場所に表示する方法は、以下の通りです。

• HTMLのタグにid属性を付ける
• id属性の場所に、canvasを表示するようにコードを変更する
  • parent()で、canvasを指定した要素の子要素にする

今までは、任意の場所にcanvasを表示する方法が分からなかったので、デモを画像で表示していました。今後は、canvasでデモを表示できます。