Solution 1 :

You could create a special, empty div with some id in your html code

<div id="poseContainer"></div>

which you can position however you want using html/css.

In your p5.js code you could then assign the canvas to your div container using the p5.Element.parent() method as follows…

function setup(){
    const cnv = createCanvas(640, 480);

Does that work?

Solution 2 :

  1. select the header
  2. select the canvas
  3. put the canvas after the header

You can achieve these steps by using two JavaScript methods: querySelector() and after().

function setup() {
  createCanvas(400, 400);
  let header = document.querySelector("#header");
  let canvas0 = document.querySelector("#defaultCanvas0");
<script src=""></script>
<div id="header">Header</div>

Problem :

I am trying to run posenet on my website using p5 and its setup of a canvas. The only other things on this page is the navbar at the top and the footer at the bottom. Since the canvas isn’t created until after I accept permissions for video, the canvas ends up being created below the footer.

<!-- <div>
  <br />
  <h1 class="display-4">
      <script src="camera.js"></script>
  <br />
</div> -->

Above is the section in the HTML where the script is supposed to run.
Below is the javascript that is supposed to setup the canvas with video

let video;
let poseNet;
let pose;

function setup(){
    createCanvas(640, 480);
    video = createCapture(VIDEO);
    poseNet = ml5.poseNet(video, modelLoaded);
    poseNet.on("pose", gotPoses)