# 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:** 1\
**Showing post:** 3

<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…

---

_[View the full topic](https://discourse.processing.org/t/how-to-position-button-relative-to-canvas/32442)._