Hi! I’m using p5 to fake a retro computer terminal for a spooky game. I want the user to be able to type in the terminal, but I find the html text-input box to be visually jarring.
Is there a way to let the user click on a p5 canvas, and then be able to input text? Is it possible to ‘hide’ the visual aspect of the html text box, while also overlapping with the p5 canvas? Or is there another way to input text?
Welcome, @aith
You can apply CSS to the input element using the style() method. For example, to remove the border and background:
input = createInput();
input.position(50, 50);
input.style('border', 'none');
input.style('background', 'transparent');
You can also use this approach to style the input text. If that doesn’t work for you, then there are other ways to render input text.
That works! Is there a way* to bring that html element in front of a canvas? (sorry: forgot a word!)
Sorry. I don’t understand what you mean. The text input appears over any of the shapes I draw (in Firefox).
Look into adding a z-index property to it’s style. This controls the order it gets rendered.