How to get p5.js to create canvas at certain position

Question

I have literally 1 hour of experience in HTML, CSS right now, and a lot more sophisticated understanding of programming, for example with java script. So please forgive me, if i have zero idea on how to do something here.

I would like to have my p5 canvas created, which also adhers to my CSS rules. how do i do this?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My website!</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="container">
        <h1>My Website</h1>
        <h2>It is all coming together.</h2>

        <script type="text/javascript" src="p5.js"></script>
        <script type="text/javascript" src="my_code.js"></script>
    </div>
</body>
</html>

My CSS:

body {
    background-image: url("matt-walsh-tVkdGtEe2C4-unsplash.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.container {
    background-color: hsla(0, 0%, 50%, 0.8);
    height: auto;
    width: fit-content;
    padding: 0px 250px;
}

h1 {
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    font-size: 10vw;
    font-family: Arial;
    color: white;
    text-align: center;
}

h2 {
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    font-size: 5vw;
    font-family: Arial;
    color: white;
    text-align: center;
}

p {
    font-family: Arial;
    color: black;
    text-align: left;
    max-width: 200vw;
}

script {
    alignment: center;
}

And for completion sake:

function setup() {
    createCanvas(400, 400);
}

function draw() {
    if (mouseIsPressed) {
        fill(0);
        ellipse(mouseX, mouseY, 80, 80);
    }
}

This creates this page:

you can style the `canvas` element. I wouldn't style the `script` element that doesn't make sense. p5.js creates a canvas for you so you can style that. — George, Aug 13 '20 at 22:02

score 4 · Accepted Answer · answered Aug 14 '20 at 09:47

What you can do is create the div which will contain you canvas directly in your html

<body>
    <div class="container">
        <h1>My Website</h1>
        <h2>It is all coming together.</h2>

        <div id="canvasDiv"></div>
    </div>
</body>

And then in your setup() function you create the canvas and put it in this div:

const myCanvas = createCanvas(400, 400);
myCanvas.parent('canvasDiv');

This should give you the same result as what you already have but now in your css you can style this div and thus change its position:

#canvasDiv {
    // your canvas style
}

Now changing the position of your canvas is just a matter of positioning a div in your html. There are a lot of different way to do that depending on what you want to do exactly but you should be able to find some good resources about that online.

Also as @Georges pointed out in the comment this part of your CSS file doesn't make sense:

script {
    alignment: center;
}

You are trying to align your script tags but these tags are only used to source some javascript, they are not displayed in the page. And the style applied to these tags doesn't affect the HTML elements which are handled/created by your javascript code, so this CSS is useless.

How to get p5.js to create canvas at certain position

1 Answers1

Linked