Button not showing correctly

[hifiguyy]

Hi newbie here, so this might be on my end, but buttons are not shown correctly on the canvas

If I use the "go live" feature, it is shown correctly in my browser.

I have to add the position, but even then 0,0 sits on top of rulers in canvas, but shows correctly in web browser.

function setup() {

canv = createCanvas(600, 600);

  button.size(100,20);
  button.position(0,0);

function draw() {
background(255, 150, 100, 50);
 }

If I can easily fix this on my end please let me know.

[pixelkind]

Hej @hifiguyy, it looks to me like you are using a DOM feature that creates a HTML element. p5canvas is developed specifically for drawing on the canvas element and not for adding, changing or removing DOM elements. So it is not optimised for the task you are most likely trying to achieve.

What do you plan to achieve and what is your full source code (it seems there is some part missing, like creating the button). It might be that p5canvas is not the right extension for your job.

[hifiguyy]

Hey Pixelkind,

Honestly right now I'm simply going through a lot of the learning material on p5.js, learning both p5 and javascript simultaneously. some of the tuturoials seem to use the DOM and that is how I've been working with it.

Is there some workflow I should look into that would make my code work better with p5canvas? I really like the convenience of working with p5canvas.

[pixelkind]

Hej @hifiguyy, I am sorry that the DOM elements are currently not supported. You can find a reference of the DOM commands here: https://p5js.org/reference/#group-DOM. I will try to look into it, if I can support it in a future version. The only thing right now is to avoid the DOM commands, like creating buttons.

If you like you can link me a tutorial, so I have an idea what the use-case it. Thanks :)

[hifiguyy]

Hi @pixelkind , Sorry I fell off this. I'm not a heavy github user.

The tutorial: https://www.youtube.com/watch?v=-jysK0nlz7A&list=PLRqwX-V7Uu6ZmA-d3D0iFIvgrB5_7kB8H&index=6

After these tutorials, I stopped bothering with DOM elements, so its not a big deal for me personally. I thought I was doing something wrong on my end.

I found out how to setup liveshare and use the vscode live preview extensions, I still use p5canvas because it will tell me of any syntax errors, and I seem to be able to open any script anywhere. I assume that is why the DOM elements aren't supported?

Either way I'll close this ticket.

Cheers