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

p5.js Coding Questions
1

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.

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
My sketch: https://editor.p5js.org/Bassam/sketches/QiLGcNF20

1 Like
2

1 Like
3

Well it seems so.

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

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().
1 Like
5

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

I’ll keep at it, thanks.

6

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.

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);
}
1 Like