0

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.

Mohammad Kherfan
  • 11
  • 3
  • Does this answer your question? [Can I create multiple canvas elements on same page using p5js](https://stackoverflow.com/questions/37240287/can-i-create-multiple-canvas-elements-on-same-page-using-p5js) – ggorlen Dec 24 '22 at 07:20
  • See also [How to put p5.js canvas in a html div](https://stackoverflow.com/questions/35660240/how-to-put-p5-js-canvas-in-a-html-div). You can make two instances with instance mode and attach them to whichever divs you want. – ggorlen Dec 24 '22 at 07:21

2 Answers2

0

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');
}
Wulfbane
  • 196
  • 2
  • 5
0

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

<div>
<script src="sketch1.js"></script>
</div>
Madworld Games
  • 1
  • 1