Controlling where Canvas is created? P5.js

Question

I've been exploring the p5 docs but haven't found any example on how to control where the canvas is made.

I see that createCanvas() has an optional 3rd argument for renderers, but I'm not entirely sure how or if I should implement that.

Essentially what I have is a modal and I would like to create the canvas inside it.

Markup:

<div>
    <div class="IX_recordControls clearfix">
        <div class="rcrow canvas">Woof</div> <-- //Let's say I want my canvas here.
    </div>
</div>

In my JS file I call createCanvas() in setup() like so:

function setup(){
    createCanvas(400, 150)
    $s.p5mic = new p5.AudioIn()
    $s.p5mic.start()
    $s.micIsOn = true
       background(155);
       draw();
       noLoop();
    }

How can I can communicate to createCanvas that I want it to be generated inside my modal?

Answer 1

You can use p5.Element.parent() function.

<div id="sketch-holder">
  <!-- Our sketch will go here! -->
</div>
...

var canvas = createCanvas(100, 100);

// Move the canvas so it’s inside our <div id="sketch-holder">.
canvas.parent('sketch-holder');

Source: GitHub