Canvas not appearing in Div

p5.js Beginners
1

Hi, I’m brand new. I’m building a project that relies on a section in the middle of the website generating a random output from a list. This is my p5 code:

let words = ["stretching", "drink water", "sun"
]

function setup() {
  sketchWidth = document.getElementById("output").offsetWidth;
  sketchHeight = document.getElementById("output").offsetHeight;
 let renderer = createCanvas(sketchWidth, sketchHeight);
  renderer.parent("output");
  textFont("Righteous",36);
  fill('rgb(0,255,0)');
  noLoop();
}

function draw() {
  background(220); 
  let randomwords = random(words);
  text(randomwords, 200, 50);
}

the html is just

<div class="output"></div>

with the css currently set at display:block. The p5 works when I test it in the web editor but I’m losing the canvas when I try to pull it all together in brackets. I’ve included a console.log line to make sure it’s all connecting, which it does.

Thanks for any help or links!

1 Like
2

A tag needs a unique id attribute in order to be found by p5.Element::parent() method:

<div class="output" id="output"></div>

3 Likes
3

HA yes. thank you @GoToLoop I wish I posted two hours ago :relieved: