P5キャンバスは、CSS

Question

によって大きさができない私は（JavaScriptから）200pxの初期の幅と高さとP5キャンバスを有します。しかし、私はまた、JavaScriptを100％の幅に設定しています。 p5でキャンバスを作成してCSSの幅と高さのプロパティを設定する方法はありますか？

CSS：

canvas { 
    width: 100%; 
} 

のjavascript：

function setup() { 
    createCanvas(200, 200); 
} 
function draw() { 
    background(100); 
} 

参照my codepenこれを示しています。

Answer 1

ありは確かです！秘密は、p5からのキャンバスの幅が動的に作成されることです。つまり、それはelementレベルで適用されます。あなたは!importantとして宣言を調達する必要があるので、特異性であることをオーバーライドする方法はありません。

canvas { 
    width: 100% !important; 
} 

は、あなたが簡単にwidthを指定することができますが、要素のheightが親に相対的であることを覚えておいてください。あなたはは親を持っていない場合、それは0PXにデフォルト設定されます。このような状況では、純粋に高さに基づいて調整を試み、キャンバスを完璧な正方形にします。親なしでパーセンテージベースのwidthを設定することができます。これは、ターゲット要素の親がない場合はビューポートの幅を仮定しているためです。

body { 
    height: 100px; 
} 

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

または：：

heightを調整するためには、ピクセルベースの測定を使用し、または固定の高さを持って親を利用するためにどちらかの必要があるだろう

canvas { 
    width: 100% !important; 
    height: 100px !important; 
} 

私はこのhereを展示フィドルを作成しました。

希望すると便利です。 :)