# Text appears in different positions

**URL:** <https://discourse.processing.org/t/text-appears-in-different-positions/19720>\
**Category:** Coding Questions\
**Created:** [April 13, 2020, 1:23am UTC](https://discourse.processing.org/t/text-appears-in-different-positions/19720 "2020-04-13T01:23:23Z")\
**Posts on this page:** 2\
**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 13, 2020, 1:23am UTC](https://discourse.processing.org/t/text-appears-in-different-positions/19720/1 "2020-04-13T01:23:23Z")

</div>

I had an earlier problem where buttons didn’t stay where I wanted on the canvas. I managed to resolve that problem. I should say resolved somewhat because the position is slightly different in Chrome compared to Mozilla.

```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);
}

function windowResized() {
  centerCanvas();
}

```

**Now** the problem is that using the same technique as above (positioning elements based on x,y values calculated from code above), text appears in different positions in different browsers, on different computers. Also, the text also appears in different positions depending on whether the page was loaded while the browser was maximized or not.

```auto
text("Select image:", x - 220, y); //x,y values calculated in the code above

```

How do I go about reliably positioning text and buttons in my sketch?

Thanks.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 18, 2020, 6:51pm UTC](https://discourse.processing.org/t/text-appears-in-different-positions/19720/2 "2020-04-18T18:51:27Z")

</div>

> [@Bassam](#):
>
> the text also appears in different positions depending on whether the page was loaded while the browser was maximized or not.

Isn’t this literally what your code says – to position things differently based on x and y, and to base x and y on a fixed offset from the centers of the window / sketch? If you haven’t already resolved this issue, perhaps you could share a brief complete sketch (e.g. with [editor.p5js.org](http://editor.p5js.org)) showing what is happening now, and explaining what you want to happen instead.

If you resize windows / canvases, text must always appear in “different positions”. The question is what you want to hold constant – fixed distance from the edge? percent? It looks like you are trying to do both, which may mean that you are doing neither.