Trying to insert a p5.js canvas into a div using the divs width to control the canvas width, within a jekyll post. The markdown file includes a div positioned at the top of the post.
<div id="myCanvas"</div>
<script src="/js/p5Sketches/firstP5Sketch.js" type="text/javascript"></script>
Java script has the p5.js canvas assigned to the div. Attempting to retrieve the parent div's clientWidth is yielding unusual results.
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);
}
In the canvasDiv attributes, the correct clientWidth value is obtained (844px). However, the width variable prints as 1244px. In the Chrome inspector, the p5 canvas width is set to 100px.
<canvas id="" width="200" height="900" style="width: 100px !important; height: 450px !important;" class=""></canvas>
The value is not transferred to the p5 canvas and the reason remains unclear. No CSS is applied to style the myCanvas or canvas elements.
Thank you for your assistance.