Hi guys,
I think I may of found an issue with createInput() more specifically
The example given in the reference document: createInput()
It is perfectly lined up and looks flush with the canvas in the example. However when you copy the code exactly and paste it into p5.js’ built in editor the createInput() box is no longer lined up and goes beyond the canvas.
Can anyone confirm this? I have tried different browsers and I still get the same result
Hello, @Lynceus, and welcome to the Processing Forum!
The same occurs here on an iPad with Safari. Widening the canvas to 113 pixels makes it flush with the right edge of the canvas.
EDIT (2x on August 11, 2021):
The above applies to the p5.js online editor.
Additional testing with the online editor reveals that the following calls to createCanvas, when uncommented, cause the right edge of the input to align with the right edge of the canvas, when the display length of the box, later on, is specified as 100:
// Chrome on Macbook Air and MacBook Pro
// createCanvas(108, 100);
// Safari and Chrome on iPad
// createCanvas(113, 100);
// Safari on MacBook Pro
// createCanvas(106, 100);
Clearly, with the online editor, the display length of the box is greater than what is specified, and the amount of excess length differs between browsers.
However, with Processing p5.js Mode and Chrome on a MacBook Air, the original code from the example causes the right edges of the box and the canvas to align properly.