Canvas not appearing in Div

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);

function draw() {
  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

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

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


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