p5.js element on canvas positions

Question

p5.js element on canvas positions

2.6k views Asked by frankjust At 12 September 2024 at 12:13

I'm coding a p5.js game and i have to draw a button, an input and a p html elements over my canvas. I wanna have all this elements centered relative to the canvas.

I tried this solution without success:

var gameCanvas = createCanvas(600, 600);
gameCanvas.parent("game-container"); 

input = createInput();
input.position(280, 300);
input.parent("game-container");

I have a div with game-cointainer id and this work until i center the div by css. When I center the div the canvas get centered but the input position remain relative to the div and not to the canvas.

So this is a responsive html page powered with MDL framework. If i center the canvas with "mdl-layout-spacer" div before and after my "game-container" div, the canvas stay to the center but input remain to left (300 px from the left of my game-container div).

If i center the game-container div with mdl col offset both inout and canvas are centered but i lose the responsive center. Anyone that is good with p5.js know how i can solve this problem?

Original Q&A

There are 2 answers

**Travis** · Answer 1 · 2016-12-28 00:35:38

This is because you are loading the input object before you load the CSS page. Either put the script tag after the css tag, or put

input = createInput();
input.position(280, 300);
input.parent("game-container");

into your setup() function.

**Huhngut** · Answer 2 · 2021-07-29 14:19:36

Your problem is that the p5 button is position absolute
Solution:

Create a div called container. Apply some flexbox so the children are centred

#container {
            min-height: 100vh; /*vertical center*/
            min-height: -webkit-fill-available; /*mobile viewport bug fix*/
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

Now add a div sketch to your container. The sketch will be centred vertically and horizontally. It's important to add this div because its size will be equal to your canvas size. You can then add the button to this canvas. The sketch div needs position: relative to override the absolute position of the button

#sketch {
            position: relative;
        }

Now you can create your canvas and button. Then add both of them to the sketch

function setup() {
  let canvas = createCanvas(100, 100);
  canvas.parent("sketch");

  background(0);

  button = createButton('click me');
  button.mousePressed(changeBG);
  button.position(0, 0);
  button.parent("sketch");      
}

function changeBG() {
  let val = random(255);
  background(val);
}

The result is a vertically and horizontally centred sketch with a button relative to the sketch top left. Please try the example below. I coloured the divs for you. Container:red, Sketch:green, Canvas: grey values. You won't see much green because its covered with the Canvas

function changeBG() {
  let val = random(255);
  background(val);
}

function setup() {

    let canvas = createCanvas(100, 100);    
    canvas.parent("sketch");
    
    background(0);

    let button = createButton('click me');
    button.position(0, 0);
    button.mousePressed(changeBG);
    button.parent("sketch");

}

body {
      margin: 0;
     }
        
#container {
            min-height: 100vh; /* mobile viewport bug fix */
            min-height: -webkit-fill-available;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            background-color: red;
           }
        
#sketch {
         position: relative;
         background-color: green;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js" integrity="sha512-N4kV7GkNv7QR7RX9YF/olywyIgIwNvfEe2nZtfyj73HdjCUkAfOBDbcuJ/cTaN04JKRnw1YG1wnUyNKMsNgg3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body>
    <div id="container">
        <div id="sketch">

        </div>
    </div>
</body>

</html>

I hope I was able to help you guys. Have a nice day

TechQA.

p5.js element on canvas positions

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in CSS

Related Questions in MATERIAL-DESIGN-LITE

Related Questions in P5.JS

Popular Questions

Popular Tags

Trending Questions