I am attempting to integrate the output canvas from p5.js into my webpage by following a tutorial heretutorial. I am hoping that the canvas will appear where I have positioned it within the HTML body. However, no matter what I try with CSS properties like position and display, it always ends up at the bottom of the page. Even when I attempted to place the script inside the body tag, the same issue persisted. Additionally, if multiple scripts are included, the canvases start overlapping.
Below are some example code snippets:
index.html
<!doctype html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b6b2e5b2a352e352b">[email protected]</a>/lib/p5.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<h1>Hello World</h1>
<p>This is a sentence</p>
</body>
</html>
test.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
circle(200,200,50,50);
}