I'm wondering if there was any way to get an input from the user, preferably to a texbox (or anywhere a user can see what he's writting) in a canvas element through javascript.
HTML inside of canvas is not possible.
<input>: The Input (Form Input) element. The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent.
Unfortunately it's not possible to use <canvas> as input form, but what you can do is to draw into canvas, then after finishing the drawing operations "export" it's content into an <image> . Fortunately you can use image as a form. The standard way to draw canvas content into an image is by using canvas.
You cannot place elements inside a canvas (and have both displayed); they are only displayed if the browser does not understand the canvas element.
Position a textbox over the top of the canvas element using absolute positioning.
my suggested layout is something like:
<div style="position:relative;width:800px;height:800px">
<canvas width="800" height="800"></canvas>
<input type="text" style="position:absolute;left:100px;top:300px;width:600px; etc...." />
</div>
with this you have the relative positioned <div>
to base where your going to pop things up over, I would probably also add a modal backdrop...
hope this helps -ck
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With