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?
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
into your
setup()
function.