Creando TextField de entrada en una posición precisa en Canvas?

Question

Canvas puede dibujar texto pero no puede crear campos de texto de entrada. Esto significaría que uno tiene que hacerlo en html, pero ¿cómo puede estar seguro de posicionar ese campo de texto exactamente donde lo desea?

Quiero ser capaz de hacer esto programáticamente en tiempo de ejecución.

Answer 1

Crea la siguiente estructura HTML para colocar la caja de entrada en el lienzo.

<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> 

Espero que esto resuelva su problema. Reemplace left=? y top=? con las posiciones apropiadas.