CODEWITHSUNDEEP
javascripthtmlp5.js
coby1kenobi
coby1kenobi

Reputation: 65

elements being covered by p5 canvas

I'm using p5 to create a canvas where I can draw stuff but when I tried to place text under it, it was always behind the canvas. I was able to resolve this for my laptop only by changing width and height artificially on the css file. The fix only works well for my laptop.

I placed the p5 canvas element inside a div in the HTML file but when I look at the elements tab in the dev tool on chrome, it says the div height is equal to 0. I have a feeling that it is because the HTML loads first before the js? I'm using userWidth for my createCanvas(). Shown below:

function setup() {
  const canvas = createCanvas(userWidth, userWidth/1.8).center('horizontal');
  canvas.parent('canvas');
}

HTML file (under body tag):

<div id = 'canvas'>
  <!-- canvas will go here -->
</div>
<div>
  <p id = 'textarea'>
    <!-- text added using DOM innerHTML -->
  </p>
</div>

How can I resolve this?

Upvotes: 0

Views: 516

Answers (1)

coby1kenobi
coby1kenobi

Reputation: 65

I ended up placing the 'div' and 'p' tag for the text in the same div as the canvas. I'm not really sure why that worked but it did. I still had to edit the top-padding of the CSS file to mimic the ratio of width to height, with the width being 100%.

Upvotes: 1

Related Questions