I am not going to explain how a <div> gets onto a page in a certain position. However, I will show how to position
a p5js canvas into a <div>.
- In your HTML, create an ID. For example, <div ID='idName'>
It must be an ID, not a class.
- Now in your p5js code for setup, write this:
function setup() {
let cvs = createCanvas(400,400);
cvs.parent("idName");}
//end setup
That puts canvas into the <div> so all you have to do is get the <div>
to be where you want it.
- That's it. Notice that there was no CSS. You will still use a CSS class to position the <div>, but it has
nothing to do with making the p5js canvas be inside that div.