How to specify where to put a P5.js canvas in an HTML website-CodePudding

I want to specify where my P5.js canvas will show up.

It keeps showing up at the end of the HTML document even when I change the place of the tag. Also when I try multiple files, it only shows the first one.

Here's an example:

<p> text1 </p>
<script src="sketch1.js"></script> <!-- I want this canvas to be here -->
<p> text2 </p> 
<script src="sketch2.js"></script> <!-- I want this canvas to be here -->

The website only shows the first canvas at the end of the document.

CodePudding user response：

Try setting up parent containers for your two canvas instances:

<p> text1 </p> 
<div id='myContainer1'></div>

<p> text2 </p> 
<div id='myContainer2'></div>

Then use:

// sketch1.js
function setup() {
  let myCanvas1 = createCanvas(600, 400);
  myCanvas1.parent('myContainer1');
}

// sketch2.js
function setup() {
  let myCanvas2 = createCanvas(600, 400);
  myCanvas2.parent('myContainer2');
}

CodePudding user response：

Nest your script tags inside a div and then style it as needed

<div>
<script src="sketch1.js"></script>
</div>