How does the canvas mix with html?

Hello all,

I am planning on starting my first p5js project, this is my first time in p5js but i have practiced in processing previously.

My question is how to make the html elements go ontop of the canvas. what i mean is

how can does it work so i can make “tyler owens” be on top of the canvas rather than being stuck above it.

Sorry this question is so simple, just not understand this basic first step!

Thank you

1 Like

ON TOP is same as ABOVE? or OVER?
anyhow the positioning DOM thing is tricky, see if it helps:
https://editor.p5js.org/kll/sketches/h53BeOPNU

that was a test of a simple HTML web page layout
WITH a p5.js canvas area

1 Like

for example make it look like this,

so the idea is to add DOM elements FROM SCRIPT
and then use the
https://p5js.org/reference/#/p5.Element/position
on it.


but you possibly tried the other way,
start from HTML
and then it gets more tricky,


anyhow to play please also link to your test project here at
https://editor.p5js.org
or you would have to post / paste
index.html AND sketch.js
file again and again
and still not many people would like to follow you and play / help

1 Like

If the text ‘tyler owens’ isn’t part of your sketch, you could play around with CSS functions such as positioning and z-index. Provide the div tags in your HTML document with class names or id’s and assign CSS rules to it using your stylesheet.

1 Like