p5.js：divの高さを変更するときのキャンバスの高さのサイズ変更

Question

私はこのdivを拡張するボタンをクリックしてdivを追加すると、p5.jsサイズでキャンバスを作成しようとしています。私はキャンバスをリロードする必要はありません、代わりにいくつかの追加の高さを追加する必要があります。それを行う方法はありますか？私はキャンバス幅を100％と高さ：autoにしようとしましたが、動作しません。

<div class="canvas-wrapper"> 
    <div id="canvas"></div> 
</div> 

<button type="button" class="button" id="extend-canvas">Extend</button> 

スクリプト：

function setup() { 
    var myCanvas = createCanvas(498, 598); 
    myCanvas.parent('canvas'); 
} 

$("#extend-canvas").click(function() { 
    var canvasHeight = $(".canvas-wrapper").height(); 
    $(".canvas-wrapper").height(canvasHeight + 300); 
}); 

CSS：

.canvas-wrapper { 
    margin: 0 auto; 
    background: #fff; 
    width: 500px; 
    height: 600px; 
    position: relative; 
} 

#canvas canvas { 
    width: 100% !important; 
    height: auto !important; 
} 

Answer 1

あなたはこのためにresizeCanvas()機能を使用することができ、以下のコードを参照してください。詳細はthe referenceにあります。ここで

は、画面の幅と高さに一致するようにキャンバスのサイズを変更例を示します

function setup() { 
    createCanvas(windowWidth, windowHeight); 
} 

function draw() { 
    background(0, 100, 200); 
} 

function windowResized() { 
    resizeCanvas(windowWidth, windowHeight); 
} 

しかし、あなたは同じように簡単にdiv要素の幅と高さを取得し、それにキャンバスサイズを設定することができます。