Creating input text field in exact position on canvas?

Canvas can draw text, but it cannot create an input text field. This would mean that you need to do this in html, but then how can you precisely place this text box exactly where you want?

I want to be able to do this programmatically at runtime.

+5
source share
1 answer

Create the following HTML structure to place the input box on the canvas.

<div id="container" style="width:500px; height:500px; position:relative;">
    <canvas id="drawing-surface" width="500px" height="500px"></canvas>
    <input type="text" style="position:absolute; left=?; top=?;" />
</div>

Hope this solves your problem. Replace left=?and top=?to the proper positions.

+5
source

All Articles