p5js stuck into a div on this page.

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>.
  1. In your HTML, create an ID. For example, <div ID='idName'>
    It must be an ID, not a class.
  2. 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.
  3. 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.


Choose a size, then click in
the box to make new circles