Using the canvas as the parent of an element makes it disappear

p5.js
1

Hello,
Why does a button disappear if I set canvas as his parent ?

canvas = createCanvas(800, 600);
button = createButton("huhu");
button.parent(canvas);
2

Check this answer https://stackoverflow.com/questions/4797748/can-i-put-an-html-button-inside-the-canvas

I don’t think a canvas could contain a button. It could hover over the canvas. You just need to place it relative to the canvas’ parent and change its z-index.

Kf

3
4

So I guess he is missing p5.dom? A canvas element can contain other html elements? That is not what I got from the stackoverflow question, @GoToLoop

Kf

5

I didn’t state anything other than reporting the sketch worked alright! :expressionless:

That is, the <button> SHOWS UP, regardless we use parent() or not to force it to be a child of the sketch’s <canvas>. :money_mouth_face:

If we hit F12 and inspect the “Elements” tab, we’ll see the <button> is OUTSIDE the <canvas> tag: :crazy_face:

<body>
  ...
  <canvas id="defaultCanvas0" class="p5Canvas" width="800" ...></canvas></canvas>
  <button>huhu</button>
</body>
6

So that you can see what i’m seeing. http://gosuness.free.fr/button/
Do you see that button disappear after 4 seconds ?

why is that button disappearing, does it go somewhere else ?

as you can see, I did include p5.dom

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport", charset="UTF-8", width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
        <title>nouvelle page</title>
        <style> body {padding: 0; margin: 0;} </style>
        <script src="libraries/p5.min.js"></script>
        <script src="libraries/addons/p5.dom.min.js"></script>
        <script src="libraries/addons/p5.sound.min.js"></script>
        <script src="sketch.js"></script>
    </head>
    <body>
    </body>
</html>

function setup() {
    canvas = createCanvas(800,600);
    background(100);
    button = createButton("huhu");
    button.position(400,300);
    setTimeout(function() {
        button.parent(canvas);
    }, 4000);
}
7

Nope, it stayed there! Have you tried your sketch on My Sketch - OpenProcessing already? :flushed:

8

I did try that code on https://OpenProcessing.org/sketch/create,
and there the button doesn’t disappear.
But if I try it on http://gosuness.free.fr/button/ the button DOES disappear.
Why on earth is it doing that ?

9

You need to open the developer console and see if there is any error. Based on this discussion, if you don’t have p5.dom on the path you are specifying, then this things will happen. A simple test would be to use an online repo instead of local storage for your supporting script files.

Kf

10

Sketches running under OpenProcessing.org are inside an <iframe> element. :hushed:

And when we invoke p5.Element::parent() to force a <button> to become a child of <canvas>, it seems like the browser just ignores that command! :open_mouth:

On Gosuness.free.fr/button/, the sketch isn’t inside an <iframe> element. :smiley_cat:

And when method p5.Element::parent() is issued, the <button> is indeed transferred inside the sketch’s <canvas>! :rofl:

However, anything inside a <canvas> isn’t displayed at all, unless a browser doesn’t have or can’t create the <canvas>. :space_invader:

1 Like
11

Thanks for the enligthment.
using the canvas as parent seems like just a bad idea :),
The idea was to have a button on top on the canvas, using a position relative to the canvas instead of an absolute position.
But I couldn’t find a way to do relative position to another object anyway, I just gave up and made my own button inside the canvas using just p5.

12