How to create canvas above footer in html/js?

user_13667795 0
Viewed 430

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">
    Demo
  </h1>
      <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);
    video.hide();
    poseNet = ml5.poseNet(video, modelLoaded);
    poseNet.on("pose", gotPoses)
}
'''
p5.js video-capture canvas html javascript
2 Answers

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);
    cnv.parent("poseContainer");
}

Does that work?

user_117854560
  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");
  header.after(canvas0);
  background("pink");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<div id="header">Header</div>
<div>Footer</div>

user_8092560
Related