How to position button relative to canvas?

[processing_user]

hello all,
How can I position button(using createButton()) relative to canvas? with button.position() I can position the button on the canvas area, but I wanted to know whether there is a way to change button position when the canvas position or its size changes?

thank you

[philipplehmann]

You probably should use CSS and depending on your project even build the controls within the html-file to have easier control over the structure / layout.

[GoToLoop]

Buttons on my canvas move as I resize or maximize the browser window. How do I stop this?

Sketch’s main canvas reference is inside undocumented variable _renderer. Its coordinates are _renderer.x & _renderer.y. Its dimensions are width & height. Use those values above as base for method p5.Element::position().

Placement of sliders outside canvas

Oopsy, totally forgotten that not all p5js canvases are at browser’s position (0, 0)! Anyways, here are some “tricks”: We don’t need to store the p5.Renderer returned by the p5:createCanvas() in some global variable. p5js already does it for us under its “secret” variables _renderer & _curElement: So, in order to grab sketch’s main canvas coordinates, we just need: _renderer.position(). Of course, don’t forget to im…