# How to position button relative to canvas?

**URL:** <https://discourse.processing.org/t/how-to-position-button-relative-to-canvas/32442>\
**Category:** Coding Questions\
**Created:** [September 27, 2021, 11:50am UTC](https://discourse.processing.org/t/how-to-position-button-relative-to-canvas/32442 "2021-09-27T11:50:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![processing\_user](https://avatars.discourse-cdn.com/v4/letter/p/7c8e57/32.png) [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Post date:** [September 27, 2021, 11:50am UTC](https://discourse.processing.org/t/how-to-position-button-relative-to-canvas/32442/1 "2021-09-27T11:50:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![philipplehmann](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/philipplehmann/32/4111_2.png) [@philipplehmann](https://discourse.processing.org/u/philipplehmann)\
**Post date:** [September 27, 2021, 1:54pm UTC](https://discourse.processing.org/t/how-to-position-button-relative-to-canvas/32442/2 "2021-09-27T13:54:10Z")

</div>

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.

 ![Bildschirmfoto 2021-09-27 um 15.53.28](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/737c4fe15824f8230325fb0517b7def39a10df66.jpeg)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 28, 2021, 9:10am UTC](https://discourse.processing.org/t/how-to-position-button-relative-to-canvas/32442/3 "2021-09-28T09:10:44Z")

</div>

> [@Buttons on my canvas move as I resize or maximize the browser window. How do I stop this?](https://discourse.processing.org/t/buttons-on-my-canvas-move-as-i-resize-or-maximize-the-browser-window-how-do-i-stop-this/19687/4):
>
> 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()](https://p5js.org/reference/#/p5.Element/position).

> [@Placement of sliders outside canvas](https://discourse.processing.org/t/placement-of-sliders-outside-canvas/9631/9):
>
> Oopsy, totally forgotten that not all p5js canvases are at browser’s position (0, 0)! man_facepalming Anyways, here are some “tricks”: mage We don’t need to store the p5.Renderer returned by the p5:createCanvas() in some global variable. convenience_store p5js already does it for us under its “secret” variables \_renderer & \_curElement: male_detective So, in order to grab sketch’s main canvas coordinates, we just need: \_renderer.position(). smile_cat Of course, don’t forget to im…