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

**URL:** <https://discourse.processing.org/t/buttons-on-my-canvas-move-as-i-resize-or-maximize-the-browser-window-how-do-i-stop-this/19687>\
**Category:** Coding Questions\
**Created:** [April 12, 2020, 4:24am UTC](https://discourse.processing.org/t/buttons-on-my-canvas-move-as-i-resize-or-maximize-the-browser-window-how-do-i-stop-this/19687 "2020-04-12T04:24:16Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [April 12, 2020, 4:24am UTC](https://discourse.processing.org/t/buttons-on-my-canvas-move-as-i-resize-or-maximize-the-browser-window-how-do-i-stop-this/19687/1 "2020-04-12T04:24:16Z")

</div>

The buttons that I’ve added to my sketch are not really positioned on my canvas. I think they’re actually floating. I need them to be in fixed spots on my canvas. How do I accomplish this?

I think my centerCanvas() function is the culprit but I need it. I need to keep the canvas centered on the screen.

```auto
function centerCanvas() {
  var x = (windowWidth - width) / 2;
  var y = (windowHeight - height) / 2;
  cnv.position(x, y);
}
function windowResized() {
  centerCanvas();
}

```

Fullscreen example: [https://editor.p5js.org/Bassam/full/QiLGcNF20](https://editor.p5js.org/Bassam/full/QiLGcNF20)  
My sketch: [https://editor.p5js.org/Bassam/sketches/QiLGcNF20](https://editor.p5js.org/Bassam/sketches/QiLGcNF20)

---

<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:** [April 12, 2020, 4:27am UTC](https://discourse.processing.org/t/buttons-on-my-canvas-move-as-i-resize-or-maximize-the-browser-window-how-do-i-stop-this/19687/2 "2020-04-12T04:27:43Z")

</div>

https://codepen.io/GoSubRoutine/embed/preview/KNbwLW?height=300&slug-hash=KNbwLW&default-tabs=js,result&host=https://codepen.io

---

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [April 12, 2020, 4:32am UTC](https://discourse.processing.org/t/buttons-on-my-canvas-move-as-i-resize-or-maximize-the-browser-window-how-do-i-stop-this/19687/3 "2020-04-12T04:32:58Z")

</div>

Well it seems so.

How do I place my buttons on/in the canvas itself? I need them to stay fixed in their positions.

---

<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:** [April 12, 2020, 5:15am UTC](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 "2020-04-12T05:15:51Z")

</div>

- 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).

---

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [April 12, 2020, 5:58am UTC](https://discourse.processing.org/t/buttons-on-my-canvas-move-as-i-resize-or-maximize-the-browser-window-how-do-i-stop-this/19687/5 "2020-04-12T05:58:19Z")

</div>

I’m reading about this but so far it’s beyond my abilities.

I’ll keep at it, thanks.

---

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [April 12, 2020, 8:54pm UTC](https://discourse.processing.org/t/buttons-on-my-canvas-move-as-i-resize-or-maximize-the-browser-window-how-do-i-stop-this/19687/6 "2020-04-12T20:54:52Z")

</div>

I couldn’t make the \_renderer coordinates work but I found a solution to my problem. I adjust the positions of my buttons in the centerCanvas function now.

```auto
var x;
var y;
function centerCanvas() {
  x = (windowWidth - width) / 2;
  y = (windowHeight - height) / 2;
  cnv.position(x, y);
  button1.position(x + 220, y + 535);
  button2.position(x + 706, y + 535);
}

```