We Keep Coding

fabric.js background image type 'rectangle' not recovering

I'm trying to store a fabric.js canvas with a background image type rect. On recovery the background image wont show up.
Here is a jsfiddle demonstrating the issue: http://jsfiddle.net/revpz6qw/
After clicking "save and restore" the background is blank instead of yellow.
I can't find the problem.
thanks

It does not recover because the background is supposed to be of type Image or simply a color.
It is rendering on add because the function does not take in consideration the type of object that you are passing. But the restore function does not handle it.
Alternatively you can place an object as first object and set its property evented to false.
rect.scaleWidth(canvas.getWidth());
rect.scaleHeight(canvas.getHeight());
rect.evented = false;
canvas.add(rect);

Can I access Mask>Mask Path>Shape>BoundingBox properties via Extenscript?

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

how to draw text box inside the canvas

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

How to retrive text written on canvas as string

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.

How do I select a drawing on canvas?

I wish to create a click-able object on a tag with javascript/jQuery.
This obviously dosen't work.
var cow = new Object();
cow = ctx.drawImage(tile,cursorH,cursorV);
$(cow).click{function(){
alert('You clicked a cow!');
});

The solution is simple, but requires some groundwork be laid. First, you'll need to keep track of the "objects" you draw on the canvas. Perhaps create your own object class that keeps track of position and size. Secondly you override the onclick event for the canvas and perform a hit test on all your visible objects. The ones that are located under your cursor at the time of the click were clicked upon.

I don't think you can do it "right out of the box." Check out Fabric.js (demo) though, I believe it has support for drawing selectable objects to the canvas.