i need text box inside the canvas. is it possible to draw textbox inside the canvas??
like:
<canvas>
<input type="text">
</canvas>
i dont want answer like this:
<canvas style="background-color:blue;height:100px;width:100px">
</canvas>
<input type="text" style="z-index:101; position:absolute; top:10px; left:10px;"/>
is possible to draw textbox inside the canvas tag using javascript?
No. It's not possible.
If you want text-boxes like this, then your answers are:
use CSS exactly the way you show
make a text-box class, which draws a rectangle and a blinking cursor
keeps track of when it's clicked, using hand-written collision-detection
registers and unregisters keyboard-events when a collision is detected
draws and clears text, based on input
creates a rate-limiter, so that keys don't fire too quickly
listens for "enter" or "backspace" keys, on keyup to add another line, or erase the current text
add an additional click-listener inside the box, when it already has "focus", to try to figure out where the "cursor" (which you invent) should be, in terms of the string, based on the click's detected position within the canvas, compared to the rectangle's position in the canvas, plus the "padding" between the rectangle's starting point and the text's starting point, plus the string's calculated-width
and if the click's X and Y are higher than the rectangle's X, plus the padding before the text starts, but lower than the rectangle's X, plus padding, plus text-width, then you need to loop through and measure the text, character by character, until you find the "best-fit" for where to consider the "cursor" to be, for the next round of editing... which has to function using mouse and keyboard as inputs, of which you have to create and register the events yourself...
That's a LOT of work, compared to CSS.
So technically, yes, you can make something that's like an input box, if you're willing to write what might be hundreds of lines of unminified code, to do the same sort of thing you'd do if you were drawing a mouse/keyboard capable text-box on an empty screen using nothing but C++...
But you can not add DOM elements and make them a part of the canvas, complete with all of their events and natural behaviours.
There are some libraries out there which might help, but I'm not understanding why you'd want to go through all of this work, without a good reason.
Try this site to draw text box component on canvas. Its not CSS or HTML, little javascript.
It explains all about text in canvas.
CanvasInput - HTML5 Canvas Text Input
You can use this library to create a input text field into canvas. It is not sharp as a html/css textbox, but it's a good start.
https://goldfirestudios.com/canvasinput-html5-canvas-text-input
One workaround is this ... I think the following solution works well, although you can't type in the text box inside the Canvas you could use a separate text box and apply that text to the text area within the canvas http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/.
Related
I am wondering if there's a way to access the Bounding Box Gui properties of mask shapes so that I can see how to create perfect circle shape masks in After Effects?
My code is below:
maskpath = app.project.item(1).layer("Orange Solid 2").property("ADBE Mask Parade").property("ADBE Mask Atom").property("ADBE Mask Shape");
Not sure what you mean by "access the Bounding Box Gui properties of mask shapes", but I do think I know what you mean by "how to create perfect circle shape masks in After Effects".
See D. Ebberts' script code posted here: http://aenhancers.com/viewtopic.php?f=11&t=2084
I believe it does (or will lead you to do) what you want.
I found the answer from After-Effects-CS6-Scripting-Guide.pdf page 48
AVLayer sourceRectAtTime() method
Retrieves the rectangle bounds of the layer at the specified time index, corrected for text or shape layer content.
Use, for example, to write text that is properly aligned to the baseline.
app.project.item(index).layer(index).sourceRectAtTime(timeT, extents)
Returns
A JavaScript object with four attributes: [top, left, width, height].
I think you are talking about how to access Left Top Right Bottom values of this window.
This window appears when you click on shape of mask path
(position where pointing hand drown blue color arrow)
please any one can tell me how to access those values via Script
What I need to do is to understand if mouse leaves SVG object (path, i.e it is not a rectangular - can't use just offset, not a circular - can't use radius and center position, etc. ). I can not use mouse leave/enter events because I have a pointer for mouse that is always above all elements. Obviously I also can't just use elementFromPoint - because it gives the top layer element.
So the question:
Is there a way to understand if coordinates (X,Y) are in the specific element $("#element").
UPD:
I uploaded my current code to my website http://pekap.co/example/
I didn't create jsfiddle because I have SVG object to ebmed.
There you can find my JS, svg object I use, etc.
If you go to the svg object it changes its color and pointer appears (orange circle). The goal is to change color of the SVG area whenever we leave it/ enter it and display orange circle under mouse only inside SVG area.
Whereas currently I can accomplish on one of goals (either one with different code)
UPD 2.
Erik Dahlström gave almost perfect solution for me: set pointer-events to none in CSS. I will go for this now, however to make my day perfect it would be great if there was a way to detect when any part of circle is out of the SVG area.
I'm not sure I follow what you mean, the pointer is the little circle that follows the mouse?
If so, then just make that circle have pointer-events: none and it will be "transparent" to mouse events. Note that webkit/safari/chrome/blink doesn't yet support mouseenter and mouseleave so you'll likely need some scriptbased workaround (not sure if D3 does this already).
It should also be possible to do a solution based on using a CSS :hover rule on the path element. Set some property to some value on hover, and then check with getComputedStyle what the property is currently set to on the path element.
My suggestion would be to to create a image map of the area, its a lot of work but this seems to be what you need: http://jsfiddle.net/sb9j7/
<area shape="poly" name="dip" coords="253,102, 277,100, 280,105, 290,107, 295,111, 304,130, 290,140, 287,147, 240,157, 238,159, 227,153, 203,146, 198,125, 200,116, 214,102, 231,102" href="#">
this fiddle is from image mapster
I have a function in script that draws a rectangular on canvas.I want to clean the rectangular drew in the "if" condition.
I also have text on the canvas(its coordinates are 0,80) and it shouldn't be cleaned. Only the rectangular must be cleaned.
function red_stroke_2(yy)
{
//Red color edges
context.strokeStyle = "#f00";
context.strokeRect(0,yy,800,40);
}
if (Option1==answers[qnumber])
{
red_stroke_2(80);
}
Canvas is "stateless" in the sense that it does not know about the primitives that have been drawn or the calls that have been made. As such it is impossible to undo only a certain drawing call. If you need to modify the drawing, you need to redraw all of the items that you don't want to change. Of course you have the option to change single pixels, so if your text is black and the rectangle is red, you can replace all red pixels, but this won't work so good if antialiasing is enabled and is utterly complicated.
So either redraw the whole area (omit the rectangle drawing but render the text). Or consider using 2 Canvases on top of each other (one with the text, one with the background), then of course you can rerender the background without having to worry about the text.
Last but not least using SVG might be also an alternative, since this is stateful and consists of DOM elements that you can modify/insert/remove and the browser will do the compositing. In that case you would have a rect element and a textelement and you could simply remove the former.
This will put transparent pixels instead of your rectangle:
function clean_red_stroke(yy)
{
context.clearRect(0,yy,800,40);
}
//Call it with the same 'yy' you used in the drawing method
clean_red_stroke(80);
However I think you code could be improved, by using more variables (and consequently a most generic function) for exemple.
I have written text on canvas using filltext(). Now in another function i want to retrieve that value as string. If anyone could help me please.
Thanks in advance.
When you write the text to the canvas, also add a custom property to the canvas object containing the text itself. When you want to check it, simply query that property. So:
myCanvas.getContext("2d").filltext(theText,x,y,maxWidth);
myCanvas.addedText = theText;
And later,
var textToCheck = myCanvas.addedText;
This w3c article might be of interest to you:
When an author renders text on a canvas with fillText or strokeText,
they must also add an html element (div or span) with the same text,
styling and position to the canvas subdom. The bounding box of the
text should be set with the setElementPath method (See
http://www.w3.org/wiki/Canvas_hit_testing)
This enables user agents to use the subdom text to deliver an
accessible experience, as the subdom text acts as a proxy for the
rendered text in the bitmap.
And here's an example built for accessibility:
<canvas id="example" width="260" height="200" role="img"> <p>A rectangle with a black border. In the background is a pink circle. Partially overlaying the circle is a green square and a purple triangle, both of which are semi-opaque, so the full circle can be seen underneath.</p> </canvas>
So all you need to do is when the user enters text, store it within a div inside the canvas element.
I have a canvas with an image on it. When the user clicks on the canvas , I can find the x and y coordinates of the click. Now, i want to open a text box where the user can type something and write the result on top of the image. any ideas?
There are a couple ways I can think of doing this. Probably the simplest would be moving a temporary text input (<input type="text" />) over the canvas, having the user type in that, and then when they are done, write the text to the canvas with fillText(). I would personally keep the text in the input fields for as long as possible, so that the user can go back and edit the fields.