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
Question is a bit old, but I wanted to provide an alternative to absolute positioning. You can set the background-image (presumably to a div bigger than your textbox). Here's an example:
...<canvas id="canvas"></canvas> <div id="backDrop">...[your textbox]</div>...
$('#backDrop').css('background-image', 'url(' + document.getElementById('canvas').toDataURL() + ')');
Here's a jsfiddle as an example.
As noted here, this essentially takes a snapshot of the canvas at the point you set the background-image property. Any changes you make to the canvas after setting the background-image will not be reflected (unless you re-set it), but this is probably what you want in most cases.
There is a canvas input library. It does not use any DOM elements, but is built purely on canvas. You can read more more about it and download it at http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input . It's open-source.
You can also try it with the following:
<div style="margin:0px;padding:0px;position:absolute;width:[amount by programmer];height:[amount by programmer];border-style:solid;border-color:[if wanted];"> <canvas style="width:700px;height:700px;"></canvas> <input type="text" style="position:absolute;width:[amount by programmer];height:[amount by programmer];"/></div>
©2020 All rights reserved.