p5.js要素キャンバスの位置

Question

私はp5.jsゲームをコーディングしています。キャンバス上にボタン、入力、およびp HTML要素を描画する必要があります。私はキャンバスに関連してこの要素をすべて中央に置いておきたいと思います。

私は成功せず、このソリューションを試してみました：私はCSSでdiv要素をセンタリングするまで

var gameCanvas = createCanvas(600, 600); 
gameCanvas.parent("game-container"); 

input = createInput(); 
input.position(280, 300); 
input.parent("game-container"); 

私はゲーム-cointainer idのdiv要素と、この作品を持っています。私がdivを中心に置くと、キャンバスは中央に置かれますが、入力位置はキャンバスではなくdivに相対したままになります。

これは、MDLフレームワークを搭載した応答性の高いHTMLページです。私の "ゲームコンテナ" divの前と後に "mdl-layout-spacer" divでキャンバスを中央に置くと、キャンバスは中央に留まりますが、入力は左に残ります（ゲームコンテナdivの左側から300ピクセルです）。

ゲームコンテナのdivをmdl colのオフセットに合わせると、inoutとcanvasの両方が中央に配置されますが、反応中心を失います。 p5.j​​sでうまくいく人なら誰でもこの問題を解決する方法を知っていますか？

Answer 1

これは、CSSページをロードする前に入力オブジェクトを読み込んでいるためです。スクリプトタグをCSSタグの後ろに置くか、setup()関数に

input = createInput(); 
input.position(280, 300); 
input.parent("game-container"); 

を入力します。