Issues Overlaying HTML Buttons on a P5 Canvas

p5.js Coding Questions
1

Hi, I am creating a little evolutionary algorithm app as a side project. Anyway, I’m having troubles creating a hamburger button that will reveal a sidebar menu for changing settings and maybe returning to home. I would like the button to be on top of my canvas. For some reason the p5 canvas is displaying over the button. I have assigned the canvas to the main div and set the z-index for that div, but nothing is changing in regards to display order. Any thoughts? I suppose I could create a collection of buttons inside of my p5 script, but that seems a little kludgy if I want custom styles and a number of other things which are easier to do in html.

Alternatively, could someone point me to some menu examples in p5?

Aside: I realize I could just make the app a fixed size on the page and put a control menu elsewhere, but I figured it would be a good time to brush up on my html, css, javascript to make exactly what I’m envisioning. I also like the idea of an auto-scaling full-screen app.

Here you can see my code (script.js & index.html) and webpage. If you bring up the page you’ll see the hamburger menu being covered up in the top left corner and a pause button I added through p5.js

2

Welcome to the forums swan!

I might need to brush up as well. But maybe look into the p5.dom.js library? I don’t know if I have a clear idea of what your going for haha

3

Thanks! I briefly saw p5.dom.js being used in an example. Didn’t delve into it much, but perhaps I should look closer. I’m just trying to display an html button on top of the canvas but for some reason the canvas takes precedence no matter what.

For example, they have buttons (run, reset, copy) on top of the canvas in this example here, but I’m having trouble understanding how they work.

4

Were you ever able to figure this out?

5

I’ve gotten distracted since this post and was sort of hoping someone would come up with a solution :stuck_out_tongue: . I’m guessing your suggestion to use p5.dom.js is correct though. I’ll post again once I do it if no one else does.

6

Try setting the z-index of the button to 10.

7

That doesn’t change anything. The canvas still covers the button.

8

https://abbub.github.io/helpful.html

Try position: absolute;

for #menu.

*I also changed the z-index of .sidebar to 2.

10

Okay, you’ve either seen it or aren’t interested so I’ll leave it up until tomorrow.

11

Thank you! That does the trick, just what I was looking for.

1 Like