【Canvas/p5.js】解決。canvas要素を可変(window幅やwindowの50%,中央寄せ)などに動的にする方法 (how to centered element of canvas to the window)

背景

先日こちら「canvas上をtoutchEvent(なぞる)で遷移するタロットカードsample(サンプル)」を作ったのですが、

canvasの中央配置、可変の取り扱いに苦戦していました。。
何も指定しないとdefaultで300 x 150の幅で固定されて、可変にならない。。
jsでwindow.resizeで制御してもいいのですが、resizeごとにイベントが走ったり、そもそももっとなんか方法ないのか？？て。

調べてみても記事が古かったり、
見つかりにくかったので「canvasの中央寄せ」見つかりやすいように記事にしました。

P5.js/Canvasの可変中央寄せ

window幅に対して50%のcanvasを中央に配置。
結果、下記のコードで概ねできます。
rectで作成された四角も中央寄せにしてみます。

実装

windowWidthとwindowHeightの値を使って、
座標の開始位置がそれに対してどのくらい除算すればいいのかを計算するようです。。
%とか使えません。ので。

resizeCanvasを使って、イベントを検知します。
リファレンス: https://p5js.org/reference/#/p5/resizeCanvas

あとは微調整してみてください。

canvas中央寄せのデモ

こちらにdemoあります。

ではみなさま良いwindowWidth生活を〜。

では〜〜