Wie Canvas Breite/Höhe mit Eltern divs Attribute

Question

Ich habe versucht, ein p5.js Canvas in einem div und verwenden Sie die divs Breite, um die Leinwand Breite, innerhalb eines Jekyll Post zu steuern. In der Markdown-Datei baue ich ein div, von dem ich weiß, dass es oben auf dem Post sitzt.

<div id="myCanvas"</div> 
<script src="/js/p5Sketches/firstP5Sketch.js" type="text/javascript"></script> 

In der Javascript habe ich die p5.js Leinwand dem div zugeordnet. Ich habe versucht, div clientWidth des Elternteils zu erhalten, aber ich bekomme einige wirklich merkwürdige Ausgaben.

var canvasDiv = document.getElementById('myCanvas'); 
var width = canvasDiv.clientWidth; 

function setup() { 
    var sketchCanvas = createCanvas(width,450); 
    sketchCanvas.parent("myCanvas"); 
} 

function draw() { 
    if (mouseIsPressed){ 
    fill(0); 
    } else { 
    fill(255); 
    } 
    ellipse(mouseX, mouseY, 40, 40); 

    if (keyIsPressed == true){ 
    clear(); 
    } 
} 

function windowResized() { 
    resizeCanvas(width,450); 
} 

Als ich die canvasDiv auszudrucken Attribute mir den richtigen Wert zu erhalten client (844px), dann aber aus der Breite variabel drucken und es ist 1244px. Im Chrom-Inspektor endet die p5-Leinwand mit der Breite = 100px.

<canvas id="" width="200" height="900" style="width: 100px !important; height: 450px !important;" class=""></canvas> 

Der Wert wird nicht an die P5 Leinwand übertragen, und ich kann nicht herausfinden, warum. Nebenbei verwende ich keine CSS, um die myCanvas oder Canvas-Elemente zu stylen.

Vielen Dank im Voraus.

Answer 1

Sie benötigen 100x100 den übergeordneten Elemente Informationen innerhalb setup()

Die Standardbreite und -höhe für setup() ist zu erfassen. Und wenn innerhalb von Setup() keine Breite definiert ist, wird sie mit dem Standardwert überschrieben. Aus der Dokumentation:

Die Systemvariablen width und height werden über die Parameter an diese Funktion gesetzt. Wenn createCanvas() nicht verwendet wird, wird das Fenster mit einer Standardgröße von 100x100 Pixel angezeigt.

https://p5js.org/reference/#/p5/createCanvas

Was ich in diesem Bild getestet und bewiesen:

Hier finden Sie den richtigen Code Sie Ihre setup() Funktion mit ersetzen sollte:

function setup() { 
    var canvasDiv = document.getElementById('myCanvas'); 
    var width = canvasDiv.offsetWidth; 
    var sketchCanvas = createCanvas(width,450); 
    console.log(sketchCanvas); 
    sketchCanvas.parent("myCanvas"); 
}