How can i make the canvas in this code apear in between the two horizontal lines! Please help!

Question

https://code.sololearn.com/W39WLrOJ99vy/?ref=app

Answer 1

I am a begginer in html and am using a library called p5.js not regular js

Answer 2

This may help:
https://code.sololearn.com/WU0W04O7zpVY

I'm guessing you want to get the div between the 2 <hr> tags.
If you give the div an id you should be able to add the canvas as a child element by using:
document.getElementById("divId").appendChild(canvas);

Answer 3

Ok, so I am not familiar with p5, but it looks like a great library. I did manage to get it working with:

function setup() {
const div = document.getElementById("divId");
const canvas = createCanvas(parseInt(div.style.width, 10), parseInt(div.style.height, 10));
canvas.parent("divId"); // use the id of the div with the parent() method
strokeWeight(10);
stroke(0);
}

function touchMoved() {
line(mouseX, mouseY, pmouseX, pmouseY);
return false;
}

I saved your code with my edits here:
https://code.sololearn.com/WD1omBOdlBIx