How to create editable text on p5.js canvas

Mysterion

Hi, I'm fairly new to Javascript and p5, and I'm trying to create an interactive graph. So far, I've got the node/edge addition/removal down, but I want to add editable text to the canvas. More specifically, every time you create a node or an edge, I want to display a string next to it showing its 'weight'. If you click the string, you can also type in a new weight, and press enter to change it.

So far, I've tried several approaches to getting editable text, but I'm kinda stuck.

In my first attempt, I tried to make the text a html element via createInput() (using CSS to make the input box transparent) and basically 'overlay' it on top of my canvas. The problem with this was that html elements use different coordinate system to the canvas, so I couldn't get them to sync properly.

In my second attempt, I read about fillText(), but this required canvas.getContext("2d") to be called, and that didn't work with var canvas = createCanvas(). Instead, I would have to use var canvas = document.getElementById("canvas"), where "canvas" was the ID of the canvas html environment. However, for some reason, when I used document.getElementById, my canvas became really small and no attempts to change its dimensions or position worked.

So yeah, I'm kinda stuck. What is the recommended way of adding editable text?

GoToLoop

https://forum.Processing.org/two/discussion/17074/placing-slider-relative-to-canvas-in-instance-mode#Item_3
http://CodePen.io/GoSubRoutine/pen/KNbwLW?editors=101

https://forum.Processing.org/two/discussion/19765/generate-jsonarray#Item_5
http://CodePen.io/GoSubRoutine/pen/RoENJd/right/?editors=1011

Mysterion

Thanks, those look promising! I'll let you know how I go with it.

edit: Seems to work fine, thanks!